【知识】微信端H5使用媒体查询进行适配

【页面高度】

制作好H5页面在微信端打开的时候，由于微信导航栏和手机状态栏的存在，会使得网页的实际高度小于手机屏幕的高度。

对于iphone来说，这个高度是64px。所以在实际页面设计过程中，需要考虑到这个高度。

【媒体查询】

要注意的是，媒体查询实际上查询的是pt而不是px。也就是说，是逻辑分辨率而不是物理分辨率。

比如，iphone6的逻辑分辨率是375*667, 而物理分辨率是750*1334，即1pt = 2px。

所以我们在利用媒体查询适配iphone6的时候，写法如下：

@media only screen and (min-device-width: 375px) and (min-device-height: 667px) {


}

这里提及到了min-device-width和min-device-height，那它和min-widht和min-height有什么区别呢？

媒体查询中，min-width、max-width的查询即是对布局视口宽度的查询。

而min-device-width和max-device-width的查询实际是对设备屏幕宽度的查询。不随着设备横屏和竖屏进行改变。

这里我们之所以使用device-height的原因是，也是【页面高度】中提及到的，微信顶部栏的存在，会导致实际微信浏览器的高度height小于屏幕高度device-height。此时若用height就会导致判断不准确。