微信网站注意事项

手机屏宽度高度不一

由于手机屏大小不一,所以H5页面所承载的设计图相应的宽高也会不一样,是否需要设计多套不同的设计图以适应不同的手机屏?
最好的效果肯定是设计多套不同的效果针对不同的屏幕尺寸,但这样需要大量的人力与时间,而且维护成本太高,不符合大部分团队的实际情况。
 
典型的手机屏尺寸如:
微信网站注意事项
导航栏+iphone状态栏高度: 64px
 
iphone4
屏幕总宽度: 320px
屏幕总高度: 480px
微信网页可视高度: 416px
 
iphone5
屏幕总宽度: 320px
屏幕总高度: 568px
微信网页可视高度: 504px
 
iphone6
屏幕总宽度: 375px
屏幕总高度: 667px
微信内网页可视高度: 603px
 
iphone6 plus
屏幕总宽度: 414px
屏幕总高度: 736px
微信网页可视高度: 672px
 
samsung galaxy note3 (三丧手机开发者的黑洞。。)
导航栏+Android状态栏高度: 73px
屏幕总宽度: 360px
屏幕总高度: 640px
微信网页可视高度: 567px
 
仅iphone就4个尺寸了,更别说Android阵营的手机了
 
特别注意:以上不是手机的分辨率单位,而是普通电脑上浏览网页时的像素,这和客户端Native制作有很大的区别。
比如iphone4,宽度就是320px像素,高度为480px,如果以实际分辨率来设计即640*960来排列设计,实际在H5页面显示时会显得很小。

微信网站注意事项

上一篇:转: 从微信的故障谈谈服务可用性


下一篇:微信公众平台赞赏功能真的要来了 已进入邀请内测阶段