移動(dòng)端開發(fā)注意事項(xiàng)(1)
PC端頁(yè)面直接在移動(dòng)端瀏覽器查看會(huì)有一些問題茬暇,需要一些設(shè)置來解決
viewport 有默認(rèn)寬度寡喝,并且會(huì)默認(rèn)縮放iphone4默認(rèn)viewport大小980px視口
瀏覽器=》視口=》頁(yè)面
可以設(shè)置寬度 content="width=320"設(shè)置成和設(shè)備一樣的寬度
<meta name="viewport" content="width=320">
由于移動(dòng)端設(shè)備的多樣性预鬓,所以要借助另一個(gè)屬性 width=device-width視口寬度等于設(shè)備寬度不過單純?cè)O(shè)置寬度,頁(yè)面還是會(huì)進(jìn)行縮放格二,所以要設(shè)置縮放比initial-scale 設(shè)置縮放比
<meta name="viewport" content="initial-scale=1.0">
只設(shè)置寬度或者縮放比里的一項(xiàng)并不能達(dá)到100%還原頁(yè)面,所以要兩個(gè)同時(shí)設(shè)置
<meta name="viewport" content="width=device-width,initial-scale=1.0">
有些頁(yè)面可能不需要用戶自行縮放粉臊,防止頁(yè)面變形設(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屠凶,它的頁(yè)面寬度為640,通過縮放進(jìn)行適配矗愧,那為何要這么做?
這里就得說說移動(dòng)端設(shè)備的分辨率問題夜涕,iphone4的像素為320*480
像素又分為物理像素和css像素,這里說的手機(jī)分辨率指的是物理像素属愤,一個(gè)物理像素對(duì)應(yīng)一個(gè)分辨率
這里用iphone4來舉例說明:
- iphone4的分辨率為640*980
- iphone4的css像素為 320*480
- 所以手機(jī)上的一個(gè)css像素點(diǎn)對(duì)應(yīng)了的物理像素為 2*2 那么由此可以得到iphone4上的像素比為:物理像素/css像素=2:1
iphone6p由于具有更高的分辨率,所以像素比也更高住诸,為3:1那么由此可以看出,在iphone4上丧诺,由于淘寶頁(yè)面將寬度設(shè)置為了640px奄薇,那么要在320px寬度的設(shè)備之上進(jìn)行適配,所以要進(jìn)行縮放馁蒂,initial-scale=0.5進(jìn)行設(shè)置這么做可以提高用戶體驗(yàn),使頁(yè)面更加清晰