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

Question

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

Answer 1

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

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

相关阅读

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

Answer 2

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