移動(dòng)端的布局不同于pc端，首先我們要知道在移動(dòng)端中，css中的1px并不等于物理上的1px，因?yàn)槭謾C(jī)屏幕的分辨率已經(jīng)越來(lái)越高，高像素但是屏幕尺寸卻沒(méi)有發(fā)生太大變化，那就意味著一個(gè)物理像素點(diǎn)實(shí)際上塞入了好幾個(gè)像素。
在移動(dòng)端瀏覽器中以及某些桌面瀏覽器中，window對(duì)象有一個(gè)devicePixelRatio屬性，它的官方的定義為：設(shè)備物理像素和設(shè)備獨(dú)立像素的比例，也就是 devicePixelRatio = 物理像素 / 獨(dú)立像素。css中的px就可以看做是設(shè)備的獨(dú)立像素，所以通過(guò)devicePixelRatio，我們可以知道該設(shè)備上一個(gè)css像素代表多少個(gè)物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值為2，也就是說(shuō)1個(gè)css像素相當(dāng)于2個(gè)物理像素。但是要注意的是，devicePixelRatio在不同的瀏覽器中還存在些許的兼容性問(wèn)題，所以我們現(xiàn)在還并不能完全信賴這個(gè)東西。
還有一個(gè)因素也會(huì)引起css中px的變化，那就是用戶縮放。例如，當(dāng)用戶把頁(yè)面放大一倍，那么css中1px所代表的物理像素也會(huì)增加一倍；反之把頁(yè)面縮小一倍，css中1px所代表的物理像素也會(huì)減少一倍。
所以在做移動(dòng)端開(kāi)發(fā)時(shí)，為了使移動(dòng)端的頁(yè)面在不同的手機(jī)上同樣的大小來(lái)顯示，我們可以將頁(yè)面的寬度固定，然后獲取設(shè)備的寬度，可以得到我們之前設(shè)定的寬度與設(shè)備寬度的比例，再使用HTML5新增的viewport來(lái)對(duì)頁(yè)面進(jìn)行縮放，并固定不允許用戶再重新縮放。
在看viewport的具體用法之前，我們先搞清楚幾個(gè)概念。
layout viewport：
layout viewport 是網(wǎng)頁(yè)的所有內(nèi)容，他可以全部或者部分展示給用戶。
visual viewport
visual viewport 就是當(dāng)前顯示給用戶內(nèi)容的窗口，你可以拖動(dòng)或者放大縮小網(wǎng)頁(yè)。
不太懂的看下圖就知道了：
viewport具體用法為:
使用該meta標(biāo)簽時(shí)，在content中寫(xiě)屬性，用逗號(hào)隔開(kāi)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
| 屬性名 | 備注 |
|---|---|
| width | 設(shè)置layout viewport 的寬度，為一個(gè)正整數(shù)，使用字符串”width-device”表示設(shè)備寬度 |
| initial-scale | 設(shè)置頁(yè)面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù) |
| minimum-scale | 允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù) |
| maximum-scale | 允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù) |
| height | 設(shè)置layout viewport 的高度，這個(gè)屬性對(duì)我們并不重要，很少使用 |
| user-scalable | 是否允許用戶進(jìn)行縮放，值為”no”或”yes”, no 代表不允許，yes代表允許 |
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2024 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
