微信网站注意事项

var bIsAndroid = navigator.userAgent.toLowerCase().match(/android/i) == "android";

手机屏宽度高度不一

由于手机屏大小不一，所以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页面显示时会显得很小。

转载于:https://www.cnblogs.com/mrt-yyy/p/4720934.html