初識WEB移動端開發

1、設置meta標籤

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no;" />見文知意 <meta name="apple-mobile-web-app-capable" content="yes"/>容許全屏模式瀏覽 <meta name="apple-mobile-web-app-status-bar-style" content="black"/>狀態條樣式 <meta name="format-detection" content="telephone=no" />忽略數字識別爲電話號碼 <meta name="format-detection" content="email=no" />安卓自動禁用，IOS不會自動識別郵件地址

<meta name="viewport" content=" 
height = [ pixel_value |device-height] , 
width = [ pixel_value |device-width ] , 
initial-scale = float_value , 
minimum-scale = float_value , 
maximum-scale = float_value , 
user-scalable =[yes | no] , 
target- densitydpi = [ dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi] " />

2、使用百分比佈局，使用rem單位和mediaQuery

html {
    font-size: 62.5%; /* 10÷16=62.5% */
}
@media only screen and (min-width: 481px){
    html {
        font-size: 94%!important; /* 15.04÷16=94% */
    }
}
@media only screen and (min-width: 561px){
    html {
        font-size: 109%!important; /* 17.44÷16=109% */
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 125%!important; /* 20÷16=125% */
    }
}

meidaQuery可用直接用在樣式表裏，也能夠用在link標籤中；

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">    // 肖像模式樣式      
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"   // 風景模式樣式
//豎屏時使用的樣式
<style media="all and (orientation:portrait)" type="text/css">
#landscape { display: none; }
</style>
//橫屏時使用的樣式
<style media="all and (orientation:landscape)" type="text/css">
#portrait { display: none; }
</style> 

爲提升頁面適應性，能夠使用百分比佈局、設置box-sizing屬性、使用display:table-cell表格佈局等方法；常見佈局方式：流體佈局，固定佈局，表格佈局，百分比佈局，混合佈局，彈性佈局等。

3、淺談屏幕

DPI怎麼計算呢？DPI也叫PPI。

PPI：PPI全稱爲Pixel Per Inch，譯爲每英寸像素取值，更確切的說法應該是像素密度，也就是衡量單位物理面積內擁有像素值的狀況。

像素：

• CSS pixels： 瀏覽器使用的抽象單位， 主要用來在網頁上繪製內容。

• device pixels： 顯示屏幕的的最小物理單位，每一個dp包含本身的顏色、亮度。

120-160屬於低分屏；

160-240屬於中分屏；

240-320屬於高分屏；

320以上數據超高分屏，也就是傳說中的retina屏幕；

開發過程當中應該根據dpi設置mediaQuery的比例或者圖片，例子：

#header {
background:url (medium-density-image.png);
}
@media screen and (- webkit -device-pixel-ratio:1.5) {
/* CSS for high-density screens */
#header { background:url (high-density-image.png);}
}
@media screen and (- webkit -device-pixel-ratio:0.75) {
/* CSS for low-density screens */
#header { background:url (low-density-image.png);}
}