前端如何处理屏幕放大125% 175%等尺寸?

目前有遇到需要兼容屏幕的放大百分比,主要有125% 150% 175%。采用DevicePixelRatio方案倒是可以解决自己编写的界面,但是一些第三方的ui框架就没有办法兼容,比如element ui等。

阅读 3.6k
2 个回答

一般来说遇到这种情况的都是笔记本,或者说是一些高分辨率屏幕。一般来说 125%150% 会比较多。但是还没有遇到过缩放175%的情况。高分辨率的显示器基本上都是没问题的,主要就是小屏幕的笔记本还是 1080p 的就会有缩放很大的情况出现。

其实这种情况,最简单的处理时当检测到页面被缩放时直接提示:
检测到你的浏览器目前处于缩放状态,页面可能会出现错位现象,建议100%大小显示

相关阅读

如何使用JS检测用户是否缩放了页面? « 张鑫旭-鑫空间-鑫生活

除了@陟上晴明 的方法,还可以使用媒体查询,我之前就是使用的媒体查询,比如:
125% 就是 1080px / 1.25 = 864px;
150% 就是 1080px / 1.5 = 720px;
超过150%的话就按照150%,给一个最小宽度出现滚动条就可以了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题