移動設(shè)備正超過桌面設(shè)備,成為訪問互聯(lián)網(wǎng)的最常見終端而且手機屏幕的大小也不一用戶量比較大的ihpone4 5 屏幕大小只有3.5寸和4寸,而國產(chǎn)大部分手機的屏幕已經(jīng)達(dá)到4.7寸以上了。于是,網(wǎng)頁設(shè)計師不得不面對一個難題:如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁?
在通常我們做電腦PC版網(wǎng)站的時候設(shè)計頁面寬度就是以滿足最低標(biāo)準(zhǔn)1024分辨率寬度;通常會采用標(biāo)準(zhǔn)960px寬;而隨著現(xiàn)在的發(fā)展屏幕大小也逐漸增大,所以這樣也不能很好的解決大屏幕的顯示效果;這個寬度在手機設(shè)備中顯然是不能很好的呈現(xiàn)網(wǎng)站內(nèi)容的;所以也有很多設(shè)計師采用不同設(shè)備設(shè)計不同的頁面;這樣做是非常麻煩;
解決方案: 百分比設(shè)置最大寬度此方案可以適用于手機網(wǎng)站設(shè)計;
寬度我們以百分比來定義設(shè)置最大寬度640px max-width:640px;不管設(shè)備屏幕多大都按設(shè)定的百分比來顯示;在手機網(wǎng)站還是可以的,因為目前來說手機最大的屏幕和最小的屏幕相差不會大太;然后通過以在head中添加以下元素來定義滿屏顯示控制縮放
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
這樣一個簡單的自適應(yīng)手機網(wǎng)站就可以很好的設(shè)計出來了。