5

我正在开发一个响应式网站，该网站具有适用于移动设备或桌面设备的不同样式表。一切看起来都不错，而且效果很好，直到在移动设备上与文本输入进行交互。他们应该出现。但是一旦点击（ehrm..touched），我发现Android中的浏览器开始疯狂滚动，打字时也出现同样的情况。但是，在输入中输入了文本，并且输入上的软键盘/焦点不会丢失。

我的项目可以在这里找到：http ://www.gortzfruit.nl/new/

问题是我一直在寻找解决方案一段时间，并发现了解决方案对我不起作用的类似问题。我一直在研究的一些主题和解决方案是：

https://github.com/scottjehl/Device-Bugs/issues/3 - 这里建议问题出在定位元素中。特别是在固定定位的元素中是绝对的。这在我的设计中反复出现，但一旦删除它并没有解决问题。

Android Browser textarea到处滚动，无法使用 -这表明问题出在css-properties -webkit-transform: translate3d(0, 0, 0); 和-webkit-backface-visibility：隐藏；。我自己没有包含这些，但我认为我包含的 Google Maps API 可能会使用这些。在分析 Google Maps API 生成的标记后，我发现他们也不使用它。

当固定位置的文本输入表单字段获得焦点时，如何防止疯狂滚动？-这个专注于尝试解决问题。将主体设置为溢出：隐藏；有人建议在集中注意力时阻止滚动，但这对我不起作用。

在javascript中禁用输入焦点上的滚动 -这里建议在keydown上返回false可能会解决问题，我尝试过但没有成功。这会阻止我的文本实际输入到输入中。

我知道这与导致这种奇怪滚动的 Android 中的错误有关。但我不知道如何应对这种情况了。对我来说，我是否知道如何避免错误或是否找到使错误不引人注意的技巧并不重要。我只是想摆脱在文本框上打字和聚焦/模糊时奇怪的滚动行为。

提前致谢，

杰伦

4

1 回答 1

2

从标记中删除元视口标签，并在开始的正文标签后立即添加：

<script type="text/javascript">
<!--
    (function() {
        var meta = document.createElement("meta");
        meta.setAttribute('name','viewport');
        var content = 'initial-scale=';
        content += 1 / window.devicePixelRatio;
        content += ',user-scalable=no';
        meta.setAttribute('content', content);
        document.getElementsByTagName('head')[0].appendChild(meta);
    })();
//-->
</script>

这将为您在移动设备上提供最佳体验（惊人的图像渲染！）。我注意到在我的设备（不是 Android）上出现了一些奇怪的滚动/缩放问题，这消除了这种问题。让我知道它是否有效:)

于 2013-06-27T14:35:52.577 回答