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

      发布在:Notes, 前端技术      评论:0 条评论

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

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

Responses