網頁源代碼中有時候會遇到這樣的一段代碼：

<metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

width - viewport的寬度 height - viewport的高度 initial-scale - 初始的縮放比例 minimum-scale - 允許用戶縮放到的最小比例 maximum-scale - 允許用戶縮放到的最大比例 user-scalable - 用戶是否可以手動縮放 具體的viewport解釋看下面===========>

原文：http://www.php100.com/html/webkaifa/HTML5/2012/0831/10979.html

viewport 語法介紹：

01	<!-- html document -->

02	<meta?name="viewport"

03	????content="

04	????????height = [pixel_value | device-height] ,

05	????????width = [pixel_value | device-width ] ,

06	????????initial-scale?=?float_value?,

07	????????minimum-scale?=?float_value?,

08	????????maximum-scale?=?float_value?,

09	????????user-scalable = [yes | no] ,

10	????????target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

11

????"

12

/>

width

控制 viewport 的大小，可以指定的一個值或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。

height

和 width 相對應，指定高度。

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之間。

1	<!-- html document -->

2	<meta?name="viewport"?content="target-densitydpi=device-dpi"?/>

3	<meta?name="viewport"?content="target-densitydpi=high-dpi"?/>

4	<meta?name="viewport"?content="target-densitydpi=medium-dpi"?/>

5	<meta?name="viewport"?content="target-densitydpi=low-dpi"?/>

6	<meta?name="viewport"?content="target-densitydpi=200"?/>

為了防止Android Browser和WebView 根據不同屏幕的像素密度對你的頁面進行縮放，你可以將viewport的target-densitydpi 設置為 device-dpi。當你這么做了，頁面將不會縮放。相反，頁面會根據當前屏幕的像素密度進行展示。在這種情形下，你還需要將viewport的width定義為與設備的width匹配，這樣你的頁面就可以和屏幕相適應。

initial-scale

初始縮放。即頁面初始縮放程度。這是一個浮點值，是頁面大小的一個乘數。例如，如果你設置初始縮放為“1.0”，那么，web頁面在展現的時候就會以target density分辨率的1:1來展現。如果你設置為“2.0”，那么這個頁面就會放大為2倍。

maximum-scale

最大縮放。即允許的最大縮放程度。這也是一個浮點值，用以指出頁面大小與屏幕大小相比的最大乘數。例如，如果你將這個值設置為“2.0”，那么這個頁面與target size相比，最多能放大2倍。

user-scalable

用戶調整縮放。即用戶是否能改變頁面縮放程度。如果設置為yes則是允許用戶對其進行改變，反之為no。默認值是yes。如果你將其設置為no，那么minimum-scale 和 maximum-scale都將被忽略，因為根本不可能縮放。

所有的縮放值都必須在0.01–10的范圍之內。

例：

(設置屏幕寬度為設備寬度，禁止用戶手動調整縮放)

?<meta name="viewport" content="width=device-width,user-scalable=no" />

(設置屏幕密度為高頻，中頻，低頻自動縮放，禁止用戶手動調整縮放)

<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

以上內容轉自http://blog.csdn.net/joyhen/article/details/43266927

以下內容轉自點擊打開鏈接

論meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1的作用

一、先明白幾個概念

phys.width:

device-width:

一般我們所指的寬度width即為phys.width，而device-width又稱為css-width。

其中我們可以獲取phys.width即width通過document.documentElement.clientWidth;而獲取css-width通過?window.screen.width獲取。如iphone6的phys.width為750px，而css-width為375px。

二、

明白一個瀏覽器默認行為。

試想，瀏覽器如果把電腦端的980px的網頁展現在寬度為750px的iphone6手機屏上，勢必會放不下，手機端橫向會出現滾動條，怎么阻止這種情況呢，很簡單，瀏覽器默認一個虛擬窗口，不同瀏覽器有不同的虛擬窗口寬度的默認值如：safari iphone：980px;

opera:850px; Andriod webkit:800px;IE:974px;然后會把這個980px虛擬窗口裝進寬度為750px的iphone6中，當然這樣的話必須縮放，這就是為什么在手機中展現電腦端頁面沒有出現橫向滾動條，而且字跡明顯變小的原因。

三、講解meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1

meta標簽中，width有兩個含義，第一、width為phys.width，第二，width也為虛擬窗口的width。這樣就會有兩個結果：

第一、此時的iPhone6的phys.width也變成了css-width即375px，我們可以通過document.documentElement.clientWidth獲取得到此時phys.width確實為375px。

第二、如你設計的是375px的手機端頁面，此時的虛擬窗口的寬度也為375px，再裝進phys.width為375px的手機，當然如設計稿一樣的效果，不會縮放，也不會出現橫向滾動條。

四、對響應式布局，媒體查詢的影響

@media only screen and (min-width: 350px) and (max-width: 480px){.....................}

如沒有meta標簽，此時的width當然即為phys.width，iPhone6就不會執行上邊的括號里邊的代碼，但是有了meta標簽以后呢，width變成了css-width，即為375px,，所以是會執行代碼的。

五、論meta標簽的影響

從上邊可以看出，有了meta標簽以后，原本的iPhone6，即像素比為2的手機，可以按照css-width相同的像素比為1的手機一樣正常顯示，像素比更高的手機也能正常顯示。當然現在andriod的2K屏在meta標簽的幫助下也能正常顯示。即對于開發者來說，已經可以不管手機的像素比，只需按照css像素編寫代碼即可。

總結

以上是生活随笔為你收集整理的关于meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-sc..的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。