当前位置: 首页 >> HTML5+CSS3_HTML网站模板_DIV+CSS技术分享 >> 阅读正文

iPhone6在微信上的设计尺寸兼容与微信图文尺寸

最近很多小伙伴都在问一些关于微信上的UI界面设计的问题,比如设计尺寸、图标、如何兼容等等。还有一些微信单图文和多图文的图片设计尺寸问题。

今天,25学堂在此一一跟大家说一下。有兴趣的小伙伴可以阅读一下:

1、移动端H5页面的设计稿尺寸大小规范

2、当当网的H5触屏版的UI视觉设计规范

 

微信h5设计

 

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

微信h5设计尺寸

导航栏+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

slient的APP设计师作品2

 

当我们在设计微信H5页面的尺寸当中,有2种选择的尺寸:

第一种是:750  *  1206(1334px-128px)

第二种是:我们一般是按照“宽1080 *  高1698(1920-132-40)的尺寸进行页面设计,宽1080是考虑到做到主流大屏手机的尺寸然后向下兼容。高度方面还要考虑减去手机系统标题栏,以及微信app标题栏的高度。

微信小程序制作流程3

 

当我们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的区域后缩放得到,想要缩略图显示效果好,需要将重要的内容放在封面图片的中央部位

分享一下,与TA一见钟情~~

本文标题:iPhone6在微信上的设计尺寸兼容与微信图文尺寸

本文地址:http://www.25xt.com/html5css3/14584.html

本文关键词: , , ,

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。