红米手机适配 H5适配 移动端适配问题

这几天做个H5页面，采用的媒体查询+scss+rem的方式做的适配。
测试中遇到了一个问题，其他设备上布局都正常，唯独红米出现了bug(两侧有余白)

红米手机出问题图：

正常显示图:

应该是这个手机机型没有兼顾到，使用@media(媒体查询)没有包含在内。

就写了两句简单的代码：var w=window.screen.width; alert(w);

用红米note7pro手机打开这个页面，就能看到弹出的屏幕宽度393px，真是奇葩；

于是在scss里添加了 @media only screen and (width:393px) {}

布局就显示正常了~