android - 野生滚动输入安卓

Question

我在一个响应式网站上工作，该网站具有适用于移动设备或桌面设备的不同样式表。在移动设备上与文本输入进行交互之前，一切看起来都不错并且运行良好。他们按应有的方式出现。但是一旦点击(ehrm.. touched)，我发现Android中的浏览器开始疯狂滚动，打字时也是如此。不过，文本是在输入中输入的，软键盘/输入上的焦点不会丢失。

我的元素可以在这里找到:http://www.gortzfruit.nl/new/

问题是我一直在寻找解决方案一段时间，并发现了类似的问题，但这些解决方案对我来说并不适用。我一直在研究的一些主题和解决方案是:

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

Android Browser textarea scrolls all over the place, is unusable -这表明问题出在 css-properties -webkit-transform: translate3d(0, 0, 0);和 -webkit-backface-visibility: hidden;.我自己没有包含这些，但我认为我包含的 Google Maps API 可能会使用这些。在分析了 Google Maps API 生成的标记后，我发现他们也不使用它。

How can I prevent wild scrolling when a fixed position text input form field gains focus? -这一个专注于尝试解决问题。设置body溢出:隐藏；有人建议在专注时阻止滚动，但它对我不起作用。

disable scrolling on input focus in javascript -这里建议在keydown上返回false可能会解决问题，我试过没有成功。这阻止了我的文本被实际输入到输入中。

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

提前致谢

杰伦

Answer 1

从您的标记中删除 meta viewport 标签并将其添加到 opening body 标签之后:

<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)上我有一些奇怪的滚动/缩放问题，这消除了这个问题。让我知道它是否有效:)