首页 > 前端技术 > h5 微信开发页面尺寸大小
2018
04-24

h5 微信开发页面尺寸大小

首先iPhone6在微信上的设计尺寸大小与实际展示大小

h5 微信开发页面尺寸大小 - 小东 - 1

导航栏+iphone状态栏高度: 64px =  导航栏44+状态栏20

 

iphone4

屏幕总宽度: 320px

屏幕总高度: 480px

微信网页可视高度: 416px

 

iphone 5 / 5c / 5s /se

屏幕总宽度: 320px

屏幕总高度: 568px

微信网页可视高度: 504px

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的尺寸兼容就好做了。代码如下:

/*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){
    
}

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

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

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

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

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

它们的尺寸:

1、封面图片

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

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

2、正文图片

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

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

3.、缩略图

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

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

最后编辑:
作者:管理员
这个作者貌似有点懒,什么都没有留下。