10年网站建设优化实战经验
18217721733

@media媒体查询在高分屏IE浏览器中按原始宽度像素执行-问题解决

上海知九信息 CSS web前端 浏览器兼容 响应式网站 2020-07-20

高分辨率屏幕一般会自动调整缩放,以显示适应屏幕大小和阅览体验的最佳分辨率。

响应式网站中用到css的@media媒体查询来控制网页布局的断点,但是在高分屏客户端上的IE浏览器中,直接按屏幕原始的最大分辨率计算了,导致网页水平方向显示了过多的items,布局紧凑挤在一起,还有fix定位的元素,宽度百分比取值也是按最大分辨率计算的,遮住了主体内容。

经排查,@media only screen and (max-device-width: 1440px) 中的 max-device-width 改为 max-width,就可按实际显示的宽度分辨率去显示布局和计算百分比宽度了。