移動(dòng)端開發(fā)注意事項(xiàng)（1）
PC端頁面直接在移動(dòng)端瀏覽器查看會(huì)有一些問題，需要一些設(shè)置來解決
viewport 有默認(rèn)寬度，并且會(huì)默認(rèn)縮放iphone4默認(rèn)viewport大小980px視口
瀏覽器=》視口=》頁面
可以設(shè)置寬度 content="width=320"設(shè)置成和設(shè)備一樣的寬度
<meta name="viewport" content="width=320">
由于移動(dòng)端設(shè)備的多樣性，所以要借助另一個(gè)屬性 width=device-width視口寬度等于設(shè)備寬度不過單純設(shè)置寬度，頁面還是會(huì)進(jìn)行縮放，所以要設(shè)置縮放比initial-scale 設(shè)置縮放比
<meta name="viewport" content="initial-scale=1.0">
只設(shè)置寬度或者縮放比里的一項(xiàng)并不能達(dá)到100%還原頁面，所以要兩個(gè)同時(shí)設(shè)置
<meta name="viewport" content="width=device-width,initial-scale=1.0">
有些頁面可能不需要用戶自行縮放，防止頁面變形設(shè)置是否允許用戶縮放user-scalable 0 1 no yes
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scaleable=0">
其他參數(shù)maximum-scale:最大縮放比，大于0的數(shù)字minimun-scale:最小縮放比,大于0的數(shù)字
實(shí)例說明現(xiàn)在拿移動(dòng)端淘寶為例子，它的meta標(biāo)簽設(shè)置為
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
可以看到淘寶的meta標(biāo)簽?zāi)J(rèn)縮放比設(shè)置為了0.5，它的頁面寬度為640，通過縮放進(jìn)行適配，那為何要這么做？
這里就得說說移動(dòng)端設(shè)備的分辨率問題，iphone4的像素為320*480
像素又分為物理像素和css像素,這里說的手機(jī)分辨率指的是物理像素，一個(gè)物理像素對應(yīng)一個(gè)分辨率
這里用iphone4來舉例說明：
- iphone4的分辨率為640*980
- iphone4的css像素為 320*480
- 所以手機(jī)上的一個(gè)css像素點(diǎn)對應(yīng)了的物理像素為 2*2 那么由此可以得到iphone4上的像素比為：物理像素/css像素=2：1
iphone6p由于具有更高的分辨率，所以像素比也更高，為3：1那么由此可以看出，在iphone4上，由于淘寶頁面將寬度設(shè)置為了640px，那么要在320px寬度的設(shè)備之上進(jìn)行適配，所以要進(jìn)行縮放，initial-scale=0.5進(jìn)行設(shè)置這么做可以提高用戶體驗(yàn)，使頁面更加清晰
