轉 關於HTML5中meta name="viewport" 的用法 不同分辨率手機比例縮放
移動端的布局不同於pc端,首先我們要知道在移動端中,css中的1px並不等於物理上的1px,因為手機屏幕的分辨率已經越來越高,高像素但是屏幕尺寸卻沒有發生太大變化,那就意味著一個物理像素點實際上塞入了好幾個像素。
在移動端瀏覽器中以及某些桌面瀏覽器中,window對象有一個devicePixelRatio屬性,它的官方的定義為:設備物理像素和設備獨立像素的比例,也就是 devicePixelRatio = 物理像素 / 獨立像素。css中的px就可以看做是設備的獨立像素,所以通過devicePixelRatio,我們可以知道該設備上一個css像素代表多少個物理像素。例如,在Retina屏的iphone上,devicePixelRatio的值為2,也就是說1個css像素相當於2個物理像素。但是要註意的是,devicePixelRatio在不同的瀏覽器中還存在些許的兼容性問題,所以我們現在還並不能完全信賴這個東西。
還有一個因素也會引起css中px的變化,那就是用戶縮放。例如,當用戶把頁面放大一倍,那麽css中1px所代表的物理像素也會增加一倍;反之把頁面縮小一倍,css中1px所代表的物理像素也會減少一倍。
所以在做移動端開發時,為了使移動端的頁面在不同的手機上同樣的大小來顯示,我們可以將頁面的寬度固定,然後獲取設備的寬度,可以得到我們之前設定的寬度與設備寬度的比例,再使用HTML5新增的viewport來對頁面進行縮放,並固定不允許用戶再重新縮放。
在看viewport的具體用法之前,我們先搞清楚幾個概念。
-
layout viewport:
- layout viewport 是網頁的所有內容,他可以全部或者部分展示給用戶。
-
visual viewport
- visual viewport 就是當前顯示給用戶內容的窗口,你可以拖動或者放大縮小網頁。
不太懂的看下圖就知道了:
viewport具體用法為:
使用該meta標簽時,在content中寫屬性,用逗號隔開
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
- 1
屬性名 | 備註 |
---|---|
width | 設置layout viewport 的寬度,為一個正整數,使用字符串”width-device”表示設備寬度 |
initial-scale | 設置頁面的初始縮放值,為一個數字,可以帶小數 |
minimum-scale | 允許用戶的最小縮放值,為一個數字,可以帶小數 |
maximum-scale | 允許用戶的最大縮放值,為一個數字,可以帶小數 |
height | 設置layout viewport 的高度,這個屬性對我們並不重要,很少使用 |
user-scalable | 是否允許用戶進行縮放,值為”no”或”yes”, no 代表不允許,yes代表允許 |
– | – |
target-densitydpi | 值可以為一個數值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個字符串中的一個 |
最後一個屬性為安卓特有,並且安卓已經決定要廢棄target-densitydpi 這個屬性了,所以這個屬性我們要避免進行使用 。
下面我們來看看移動端布局具體的代碼:
<head>
<title>Test Page</title>
<script>
var deviceWidth = parseInt(window.screen.width); //獲取當前設備的屏幕寬度
var deviceScale = deviceWidth / 640; //得到當前設備屏幕與640之間的比例,之後我們就可以將網頁寬度固定為640px
var ua = navigator.userAgent;
//獲取當前設備類型(安卓或蘋果)
if (/Android (\d+\.\d+)/.test(ua)) {
var version = parseFloat(RegExp.$1);
if (version > 2.3) {
document.write(‘<meta name="viewport" content="width=640,initial-scale=‘ + deviceScale + ‘, minimum-scale = ‘ + deviceScale + ‘, maximum-scale = ‘ + deviceScale + ‘, target-densitydpi=device-dpi">‘);
} else {
document.write(‘<meta name="viewport" content="width=640,initial-scale=0.75,maximum-scale=0.75,minimum-scale=0.75,target-densitydpi=device-dpi" />‘);
}
} else {
document.write(‘<meta name="viewport" content="width=640, user-scalable=no">‘);
}
</script>
</head>
文
轉 關於HTML5中meta name="viewport" 的用法 不同分辨率手機比例縮放