前端 解决笔记本屏幕显示缩放比例125% 150%对页面布局的影响

win10默认设置150%,对页面布局的影响靠单纯的自适应是没办法解决的

问题出在device-pixel-ratio

解决方案一

css解决(复制粘贴放在样式文件中,确保被加载)

@media all and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 1.18),
  (-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 1.18),
  (min-resolution: 1.09dppx) and (max-resolution: 1.18dppx) {
  :root {
    font-size: 14px;
  }
}
@media all and (-moz-min-device-pixel-ratio: 1.19) and (-moz-max-device-pixel-ratio: 1.28),
  (-webkit-min-device-pixel-ratio: 1.19) and (-webkit-max-device-pixel-ratio: 1.28),
  (min-resolution: 1.19dppx) and (max-resolution: 1.28dppx) {
  :root {
    font-size: 13px;
  }
}
@media all and (-moz-min-devic