移动设备上的大多数浏览器都使用与真实显示不匹配的虚拟视口。这很有用有几个原因,我认为最重要的是:
- 一个小型设备可能看起来足够大,足以容纳一个通常的老式网页,不会破坏它用于桌面屏幕的布局。
- 它用于让 HTML 渲染引擎渲染页面的当前可见部分,从而实现平滑滚动和缩放。
然而,这打破了我认为的几个标准化行为预期。
- 特别是,页面不知道它的可见区域,因此 JS 驱动的东西(如弹出窗口或通知)不再正常工作。
- 如果用户将元素移动到视图中,它似乎会破坏嵌入式资源(如缩略图、视频对象、无限列表)的按需加载。
- 它还引入了布局调整 JS 的不稳定行为,例如调整页面布局的 onresize 处理程序可以轻松更改页面大小,因此调整视口大小甚至可能重复触发 onresize 事件。
我是否应该将此视为尚未解决但总有一天会修复的行为并坚持在每个损坏的页面中使用小的解决方法,或者我是否应该放弃对 onresize、window.innerWidth 等的任何期望并返回不依赖于更多静态布局不再有视口的想法了吗?