ios - 媒体查询和视口宽度 - 好的 CSS 修复在 iPad 上不起作用

Question

媒体查询宽度有一个众所周知的问题，它与某些浏览器中的视口宽度不同（WebKit 浏览器在滚动条可见时会更改其 CSS 视口的大小）。我想通过将垂直滚动条从body或html移到第一个包装器来解决问题div（如stackoverflow 所述：https ://stackoverflow.com/a/10091608/1647291 ）。

修复

这是CSS的修复：

body, html { overflow: hidden; height: 100%; }
div.wrapper { overflow: auto; height: 100%; }

它将垂直滚动条从body或html移到第一个divinside body。多亏了这一点，您无需担心媒体查询中的视口宽度。

问题

但不幸的是，这种好方法有一个不好的副作用——在 iPad 上（也可能在其他一些平台上）页面不能平滑滚动。停止触摸屏幕后，它立即停止滚动，没有平滑和缓慢的缓动。

这个简单的 CSS 解决方案比所有那些使用 javascript 测试视口的方法更简单和更好。其中一些在此处进行了描述，但它们不可靠或使站点运行缓慢：

• CSS 媒体查询和 JavaScript 窗口宽度不匹配
• http://github.com/tysonmatanich/viewportSize
• http://github.com/ryanve/verge

有没有办法使用这个 CSS 修复并让 iPad 正确滚动？

Answer 1

这可能是你想多了。我们整天都在制作网站，这不是问题。我认为您可能过于担心特定的 px 宽度。如果 680px 与 693px 很重要，那么您的想法是错误的。我建议您首先设计移动设备，并在它变得丑陋时（使用 ems）做一个断点。对于具有短页面和长页面的网站，（导致滚动条有时会​​出现并在没有滚动条时在页面之间跳转） - 只需添加它并收工。祝你好运！

   html { overflow-y scroll }