视口元标记仅在iPad上针对Chrome浏览器禁用滚动

时间:2019-05-16 15:16:55

标签: html ios google-chrome viewport meta

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

在iPad第6代(980 x 1167窗口大小)上使用视口meta标签以及div高度为1024.469px(980 x 1167窗口大小)意味着大于屏幕高度的任何内容都无法滚动。

滚动条的确显示,但是在尝试滚动时会不断反弹回顶部,并且不允许垂直滚动。

删除视口将显示页面适合iPad屏幕,而无需滚动。

这个问题可能是由于变焦引起的吗?

我剥离了整个页面以找到罪魁祸首,这肯定是此视口元标记。

将div的高度增加约30个像素,即使使用meta标签,用户也可以滚动。

实际上,将高度增加到大于1024.469px似乎可以解决此问题。

我想使用meta标记,但是也希望我的滚动能够正常工作。

1 个答案:

答案 0 :(得分:0)

因此,为了避免发生这种情况,请在包含您的内容的元素上设置“ overflow:hidden”,否则请避免元素溢出。

NB:一段时间以来,其他移动浏览器也支持视口元标记,因此您也要在其中进行测试。

详细信息。考虑link