2

我有一个非常奇怪的问题。我已将我们的网站转换为第一个响应式设计。在我们的移动版本中，我有一个带有 tel:(电话号码) 的 href，样式显示为图像。

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

我遇到的麻烦特别是在 iPhone 上。这只发生在页面的第一次加载第一次尝试触摸电话链接以拨打电话号码时。尝试再次点击电话号码，它会按预期运行。但是第一次尝试点击电话号码时，屏幕会跳下来并集中在一个表单字段上。但它实际上甚至不关注我关注的默认值。它将专注于第二个或第三个领域，它会有所不同。

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

我正在加载 jquery 库 1.8.2、jquery 工具 1.2.7 和 Modernizer 2.6.2。不确定这些是否会导致冲突。

我会对三种信息解决方案中的任何一种感兴趣

  1. 如何通过浏览器宽度关闭 javascript 以进行响应式设计。
  2. iPhone调试工具也许。
  3. 或者当然是一个直接的解决方案。=)

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

4

1 回答 1

0

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

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

  2. 设置类似：

    if (matchMedia('only screen and (min-width: 480px)').matches) { $('需要自动对焦的元素').attr('autofocus','TRUE'); }

我承认我不知道在我头顶上的元素上自动对焦的适当设置，而不是将值设置为“TRUE”，它可能需要一个“自动对焦”值。

于 2013-01-02T03:20:09.737 回答