HTML 5之meta標籤viewport應用

關於viewport的概念:
web

先了解移動設備的屏幕尺寸和設備尺寸:spa

iPhone3 設備尺寸 320*480 ; 屏幕尺寸  320*480scala

iPhone4 設備尺寸 320*480 ; 屏幕尺寸  640*960code

iPhone5 設備尺寸 320*568 ; 屏幕尺寸  640*1136blog

從iPhone3到iPhone4,設備尺寸沒變的狀況下,屏幕尺寸放大了一倍;viewport也應運而生,即屏幕尺寸。get

示例:it

<meta name="viewport" content="..." />

關於 viewport 參數定義:class

<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]
/>
 

width、height: 能夠定義值,或者 device-width | device-height 設備的寬高meta

initial-scale: 初始縮放比例,即頁面第一次 load 的時候縮放比例。這是一個浮點值,是頁面大小的一個乘數。例如,若是你設置初始縮放爲「1.0」,那麼,web頁面在展示的時候就會以target density分辨率的1:1來展示。若是你設置爲「2.0」,那麼這個頁面就會放大爲2倍。float

maximum-scale:容許用戶縮放到的最大比例。這也是一個浮點值,用以指出頁面大小與屏幕大小相比的最大乘數。例如,若是你將這個值設置爲「2.0」,那麼這個頁面與target size相比,最多能放大2倍。

minimum-scale:容許用戶縮放到的最小比例。

user-scalable:用戶是否能夠手動縮放,若是設置爲yes則是容許用戶對其進行改變,反之爲no。默認值是yes。

全部的縮放值都必須在0.01–10的範圍以內。

例:

1.設置屏幕寬度爲設備寬度,禁止用戶手動調整縮放;

2.設置屏幕密度爲高頻,中頻,低頻自動縮放,禁止用戶手動調整縮放。

maximum-scale都將被忽略,由於根本不可能縮放。

target-densitydpi:

一個屏幕像素密度是由屏幕分辨率決定的,一般定義爲每英寸點的數量(dpi)。Android支持三種屏幕像素密度:低像素密度,中像素密度,高像 素密度。一個低像素密度的屏幕每英寸上的像素點更少,而一個高像素密度的屏幕每英寸上的像素點更多。Android Browser和WebView默認屏幕爲中像素密度。

target-densitydpi 屬性的取值範圍

  • device-dpi: 使用設備本來的 dpi 做爲目標 dp。 不會發生默認縮放。
  • high-dpi: 使用hdpi 做爲目標 dpi。 中等像素密度和低像素密度設備相應縮小。
  • medium-dpi: 使用mdpi做爲目標 dpi。 高像素密度設備相應放大, 像素密度設備相應縮小。這是默認的target density。
  • low-dpi: 使用mdpi做爲目標 dpi。中等像素密度和高像素密度設備相應放大。
  • <value>: 指定一個具體的dpi 值做爲target dpi. 這個值的範圍必須在70–400之間。
相關文章
相關標籤/搜索