iphone6 / iphone 7
屏幕总宽度: 375px
屏幕总高度: 667px
微信内网页可视高度: 603px
iphone6 plus / iphone 7 plus
屏幕总宽度: 414px
屏幕总高度: 736px
微信网页可视高度: 672px
当我们在设计微信H5页面的尺寸当中,有2种选择的尺寸:
第一种是:750 * 1206(1334px-128px)
第二种是:我们一般是按照“宽1080 * 高1698(1920-132-40)的尺寸进行页面设计,宽1080是考虑到做到主流大屏手机的尺寸然后向下兼容。高度方面还要考虑减去手机系统标题栏,以及微信app标题栏的高度。
当我们h5前端在做兼容性处理的时候,只需要理解上面的这些尺寸,即可快速写出兼容性代码:
i
iPhone5/iPhone5c/iPhone5s的屏幕显示尺寸为320*568,
iPhone6 / iphone 7的屏幕尺寸为375*667,
iPhone6 plus / iphone 7 plus 的屏幕显示尺寸为414*736,用css做iPhone的尺寸兼容就好做了。代码如下:
/*ip 4 5 5+*/
@media all and (min-width:320px) {
}
/*ip 6*/
@media all and (min-width:375px){
}
/*ip 6+*/
@media all and (min-width:414px){
}