这几天做个H5页面,采用的媒体查询+scss+rem的方式做的适配。
测试中遇到了一个问题,其他设备上布局都正常,唯独红米出现了bug(两侧有余白)
红米手机出问题图:
正常显示图:
应该是这个手机机型没有兼顾到,使用@media(媒体查询)没有包含在内。
就写了两句简单的代码:var w=window.screen.width; alert(w);
用红米note7pro手机打开这个页面,就能看到弹出的屏幕宽度393px,真是奇葩;
于是在scss里添加了 @media only screen and (width:393px) {}
布局就显示正常了~