h5 微信开发页面尺寸大小

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前端在做兼容性处理的时候，只需要理解上面的这些尺寸，即可快速写出兼容性代码：

iPhone4/iPhone4s 的屏幕显示尺寸为320*480，

iPhone5/iPhone5c/iPhone5s的屏幕显示尺寸为320*568，

iPhone6  / iphone 7的屏幕尺寸为375*667，

iPhone6 plus   / iphone 7 plus 的屏幕显示尺寸为414*736，用css做iPhone的尺寸兼容就好做了。代码如下：

第二个部分是关于微信图文消息推送当中的图片尺寸问题：

微信图文消息体验过程中有三类图片：

1. 公众号对话框中的图文消息”封面图片”（分一级、二级两种）

2. 图文消息页面的“正文图片”

3. 在对话框或朋友圈中的“缩略图”

它们的尺寸：

1、封面图片

微信有推荐尺寸：一级宽900*高500像素，二级200*200

如果宽900的要求不能达到，尽量保持宽高比，因为这会影响到3的效果

2、正文图片

一级图文消息的封面可以显示在正文中，也即微信认为宽度为900的图片显示质量就不错

所以宽度不要超过900太多至于加载慢，也不要小于太多至于图模糊了

3.、缩略图

二级图文消息的封面（200*200）会直接作为分享的缩略图

一级图文消息的缩略图是从封面900*500的正中央截取500*500的区域后缩放得到，想要缩略图显示效果好，需要将重要的内容放在封面图片的中央部位