javascript - 我应该将移动浏览器虚拟视口(viewport)视为系统性错误还是有有效的解决方法?

标签 javascript mobile-safari viewport android-browser

移动设备上的大多数浏览器都使用与真实显示不匹配的虚拟视口(viewport)。其有用的原因有几个,我认为最重要的是:

  • 小型设备对于通常的老式网页来说可能看起来足够大,不会破坏其桌面屏幕的布局。
  • 它用于让 HTML 渲染引擎渲染超出页面当前可见部分的内容,从而实现平滑滚动和缩放。

但是,我认为这打破了一些标准化行为期望。

  • 特别是,页面不知道其可见区域,因此 JS 驱动的东西(如弹出窗口或通知)不再正常工作。
  • 如果用户将元素移动到 View 中,似乎会中断嵌入式资源(如缩略图、视频对象、无尽列表)的按需加载。
  • 它还引入了布局适应 JS 的不稳定行为,例如适应页面布局的 onresize 处理程序可以轻松更改页面大小,从而调整视口(viewport)大小甚至可能重复触发 onresize 事件。

我是否应该将其视为尚未损坏但有一天会修复的行为并在每个损坏的页面中坚持使用小解决方法,或者我应该放弃对 onresize、window.innerWidth 等的任何期望并返回到更静态的布局而不是不再依赖视口(viewport)的想法吗?

最佳答案

我想您必须权衡尝试找出所有怪癖与支持您想要定位的所有设备/屏幕尺寸的开发成本。我面临着类似的问题,这当然是一个有趣的挑战! Web app on android browser WIDTH issue

关于javascript - 我应该将移动浏览器虚拟视口(viewport)视为系统性错误还是有有效的解决方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9582609/

相关文章:

javascript - 过滤数组中的元素在 Reactjs 中不起作用

javascript - react 谷歌地图 : Marker resizes after zooming

jquery - 在 jQuery Mobile 中点击屏幕关闭键盘

jquery - 更改 css 值(左 :x) if a browser viewport is <1200px

javascript - 在非移动优化站点的整个视口(viewport)中显示移动设备上的 Mobiscroll 弹出窗口?

javascript - 测试 cafe + electron + create-react-app 没有正确加载 bundle.js

javascript - 从 Flask 服务器获取音频并在 React 上以可播放的格式显示音频

jquery - Safari iOS - 单击链接后弹出 jQuery

javascript - iOS Safari 过度滚动 : Pulling down vs. 弹跳

javascript - 如何以编程方式更改 svg 视口(viewport)?