为了微信浏览器砍标题专用的CSS@media适配

这几天在写微信 H5 活动，因为图片比较多用的 absolute 也多，总共有 6 个 slide 屏幕，很多图片和背景图在不同的手机上表现的都不一样，而网上的@media 大部分都没有考虑过微信还特喵的有个标题，部分手机有虚拟 bar，导致原本逻辑分辨率高是 740px 的 S8 实际上只有 672px（S8 除开标题还会有虚拟 bar）有一个误区，很多小伙伴会以为网页的逻辑分辨率是 window 的分辨率，所以在查询逻辑分辨率的时候，大家一般会用 alert(window.screen.width+","+window.screen.height) 这样查出来的逻辑分辨率是有问题的, 这个时候的高度是算上了整个浏览器的视图加上底部虚拟按键和标题高度，而@media 中我们获取的是文档的高度，所以应该 alert($(document).width()+","+$(document).height()) 瞬间就相差 120！下面列出一些现在比较常见的机型的尺寸

/*iPhone X以及各类18:9全面屏*/
@media screen and (min-width: 320px) and (min-height: 740px) {
  ...;
}
/*Galaxy S8 18.5:9 带虚拟Bar*/
@media screen and (min-width: 360px) and (max-height: 672px) {
  ...;
}
/*iPhone 5/5S 各种小屏*/
@media screen and (max-width: 325px) and (max-height: 568px) {
  ...;
}
/*iPhone 6/7/6P/7P */
@media screen and (min-width: 375px) and (max-width: 414px) and (min-height: 603px) and (max-height: 736px) {
  ...;
}
/*Nexus 5/5x/6 大部分带有安卓16:9虚拟Bar的机器*/
@media screen and (min-width: 360px) and (max-width: 412px) and (min-height: 572px) and (max-height: 664px) {
  ...;
}

目前我自己写的这上面这些就够用了而且不会产生冲突。