wild scroll输入android

Question

我正在开发一个响应式网站,它有一个不同的移动或桌面样式表.一切看起来都不错,效果很好,直到文本输入与移动设备进行交互.他们出现了应有的表现.但是一旦点击(ehrm ..触摸),我发现Android中的浏览器开始像疯了一样滚动,打字时也是如此.但是,文本输入到输入中,并且输入上的软键盘/焦点不会丢失.

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

问题是我一直在寻找解决方案一段时间,并发现类似的问题,解决方案没有为我解决.我一直在研究的一些主题和解决方案是:

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

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

当固定位置文本输入表单字段获得焦点时,如何防止滚动？ - 这一个专注于试图解决问题.设置主体溢出:隐藏; 被建议在聚焦时阻止滚动,但它对我不起作用.

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

我知道这与Android中的错误有关,导致这种奇怪的滚动.但我不知道如何应对这一点.对我来说,无论我是否知道如何避免这个错误,或者我是否找到了一个黑客来使这个bug变得不可思议.我只是想在文本框上键入和聚焦/模糊时摆脱奇怪的滚动行为.

提前致谢,

吉荣

Answer 1

从标记中删除元视口标签，并将其添加到开始正文标签之后：

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