導(dǎo)航欄+iphone狀態(tài)欄高度： 64px

iphone4

屏幕總寬度: 320px

屏幕總高度: 480px

微信網(wǎng)頁(yè)可視高度: 416px



iphone5

屏幕總寬度: 320px

屏幕總高度: 568px

微信網(wǎng)頁(yè)可視高度: 504px

iphone6

屏幕總寬度: 375px

屏幕總高度: 667px

微信內(nèi)網(wǎng)頁(yè)可視高度: 603px



iphone6 plus

屏幕總寬度: 414px

屏幕總高度: 736px

微信網(wǎng)頁(yè)可視高度: 672px

samsung galaxy note3 （samsung手機(jī)開(kāi)發(fā)者的黑洞。。）

導(dǎo)航欄+Android狀態(tài)欄高度： 73px

屏幕總寬度: 360px

屏幕總高度: 640px

微信網(wǎng)頁(yè)可視高度: 567px



僅iphone就4個(gè)尺寸了，更別說(shuō)Android陣營(yíng)的手機(jī)了

特別注意：以上不是手機(jī)的分辨率單位，而是普通電腦上瀏覽網(wǎng)頁(yè)時(shí)的像素，這和客戶端Native制作有很大的區(qū)別。

比如iphone4,寬度就是320px像素，高度為480px，如果以實(shí)際分辨率來(lái)設(shè)計(jì)即640*960來(lái)排列設(shè)計(jì)，實(shí)際在H5頁(yè)面顯示時(shí)會(huì)顯得很小。

一般我們都是以用自適應(yīng)的解決方案，以一套或兩套效果圖適應(yīng)大部分的屏目，放棄極端屏或?qū)ζ鋬?yōu)雅降級(jí)，犧牲一些效果

正因?yàn)橹挥幸惶谆騼商仔Ч麍D，團(tuán)隊(duì)、公司擁有的手機(jī)型號(hào)又是有限的，那么其它型號(hào)的手機(jī)顯示效果就需要大家腦補(bǔ)了，

需要需求方腦補(bǔ)一下在特別小的屏或特別大的屏上你當(dāng)前效果圖的顯示效果。

二、兩種效果圖排列，以及對(duì)應(yīng)的解決方案

1、效果圖水平居中排列設(shè)計(jì)（較容易實(shí)現(xiàn)自適應(yīng)）
由于是水平居中，則兩邊可以用純色平鋪，不管屏有多寬，都可以以純色填充，這就是最最容易的自適應(yīng)了。

微軟windows8以上以及windows phone的的大色塊設(shè)計(jì)很大程度上也是更方便適應(yīng)不同屏目而采用的方案。


2、效果圖非居中排列設(shè)計(jì)（相對(duì)較難實(shí)現(xiàn)自適應(yīng)）
由于是非水平劇中，內(nèi)容可能放置在屏幕中任意位置

H5要實(shí)現(xiàn)這樣的設(shè)計(jì)圖并且要適應(yīng)各種屏幕下各內(nèi)容的位置、大小比例的正常，就需要計(jì)算每個(gè)內(nèi)容元素的位置、大小比例等

實(shí)現(xiàn)具體方案是，計(jì)算每個(gè)內(nèi)容元素的位置，寬高與整體效果圖的寬高的比例，以百分比的方式定位內(nèi)容元素及大小。

微信

H5分享，是一個(gè)適合傳播輕量HTML5頁(yè)面的地方，少即是多，內(nèi)容要少，解釋性的東西盡量放在其它地方，比如另開(kāi)網(wǎng)頁(yè)。