手機網頁開發簡單總結

1.手機屏幕的寬度不統一，咱們強制給文檔設置一個比例

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

定義：device-width是通知瀏覽器使用設備的寬度做爲可視區的寬度，initial-scale初始的縮放比例，minimum-scale容許用戶縮放到的最小比例，maximum-scale容許用戶縮放到的最大比例，user-scalable定義是否能夠縮放（0爲不縮放）。

2.使手機瀏覽網頁時，不啓用電話功能，忽視頁面上的數字識別爲電話，能夠作以下設置

<meta name="format-detection" content="telephone=no" />

3.不少人都認爲手機網頁像pc端網頁同樣，能夠設置字體，其實各個手機系統有本身的默認字體，且都不支持咱們最經常使用的的微軟雅黑，因此不是特定需求能夠不規定字體，英文字體和數字字體可以使用 「Helvetica」 ，三種系統(ios、android、winphone)都支持。

4.手機開發有特殊要求時須要單獨給元素添加樣式，咱們在樣式裏能夠這樣作

1》.首先頭部聲明

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

2》.判斷設備是橫屏仍是豎屏

<!--豎屏-->

@media all and (orientation : portrait)
{  
    body {}  
　　/*樣式代碼塊*/
} 

<!--橫屏-->

@media all and (orientation : landscape) 
{
    body {}
　　/*樣式代碼塊*/

} 

 但願個人分享能給你們一點幫助，提提意見。