与iPhone设备上的te链接和自动对焦的故障与响应式设计

Question

我有一个非常奇怪的问题。我已将我们的网站转换为第一个响应式设计。在我们的移动版本中，我有一个带tel：（电话号码）的href，以图像的形式出现。

正下方的链接是我们的表格。有javascript来将光标聚焦在第一个表单字段中。

我遇到的麻烦特别在iPhone上。这只发生在页面的第一次加载时，首先尝试触摸电话链接拨打电话号码。尝试再次点击电话号码，并按预期工作。但第一次尝试点击电话号码和屏幕跳下来，并专注于其中一个表单域。但它实际上甚至不关注我关注的默认设置。它将重点放在第二或第三个领域，它有所不同。

现在，如果我从页面中删除自动对焦JavaScript，那么问题就会消失。麻烦的是，我肯定希望在该页面的deskptop版本上使用此代码。

我正在加载jquery库1.8.2，jquery工具1.2.7和modernizer 2.6.2。不知道这些是否会导致冲突。

我会感兴趣的任何三种类型的信息解决方案的

1. 如何关闭通过为响应式设计的浏览器宽度的JavaScript。也许是Iphone调试工具。
2. 或当然是直接解决方案。 =）

感谢您的阅读和任何帮助。

Answer 1

这个方便的工具，可以让你运行JS基于mediaqueries：https://github.com/paulirish/matchMedia.js/

1. 从标记中删除自动对焦。

2. 设置是这样的：

   如果（matchMedia（ '仅屏幕和（最小宽度：480像素）'。）相匹配）。{ $ ATTR（ '自动聚焦'（ '需要自动聚焦元件'）， '真正'）; }

我承认我不知道把我的头顶部的元素上自动对焦的适当的设置，而不是其值设置为“真”，则可能需要“自动对焦”的值。