html5開發之viewport使用

標籤：style   http   color   os   使用   strong   ar   2014   html   

一、網頁手機wap2.0網頁的head裡加入下面這條元標籤，在iPhone的瀏覽器中頁面將以原始大小顯示，並不允許縮放。

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

其中： width - viewport的寬度 height - viewport的高度 initial-scale - 初始的縮放比例 minimum-scale - 允許使用者縮放到的最小比例 maximum-scale - 允許使用者縮放到的最大比例 user-scalable - 使用者是否可以手動縮放c

 

二、關於meta的詳細介紹請參考

三、下文是關於Meta的例子的詳細介紹 原文地址

3. Meta元素可視區

　　預設情況下，iPhone上的Safari會象在大螢幕的案頭瀏覽器那樣顯示你的頁面，寬度達到了980像素，然後縮小內容以適應iPhone的小螢幕，因此使用者在iPhone看這個頁面時感覺字型就比較小了，也比較模糊，必須要放大才能看得真切，對於一個普通的Web頁面似乎可以接受，但對於一個常用的應用程式就沒幾個人能夠受得了。

　　幸運的是可以使用特殊的Meta元素可視區進行糾正：

<meta name="viewport" content="width=device-width"/>

　　這個元素通知瀏覽器使用裝置的寬度作為可視區的寬度，而不是預設的980像素了，我們可以看看兩個不同的例子。

　　例3(連結：http://www.sitepoint.com/examples/iphone-development-12tips/no-viewport.html)顯示了一個簡單的段落元素，沒有Meta元素可視區，字型有點模糊。在iPhone中啟動並執行實際情況如所示。

圖 1 無可視區的顯示效果

　　例4(連結：http://www.sitepoint.com/examples/iphone-development-12tips/viewport.html)包括了一個可視區元素，現在裝置寬度只有320像素，字型也比前一個例子更清晰了。在iPhone中啟動並執行實際情況如所示。

圖 2 有可視區的顯示效果

　　另外，你還可以手動設定device-width的值，例如，假設你的部落格頁面的寬度是750像素，那麼案頭螢幕最佳大小就是800x600像素，例5(連結：http://www.sitepoint.com/examples/iphone-development-12tips/fixed750.html)顯示了一個刪減版本，如果你在iPhone中瀏覽它，你會看到980像素剩下的空間都填充了白色。

　　為了消除額外的空間，可以使用meta元素可視區將寬度設為780像素：

<meta name="viewport" content="width=780"/>

　　例6(連結：http://www.sitepoint.com/examples/iphone-development-12tips/fixed750-viewport.html)顯示了meta元素可視區布局被固定後的效果。

　　Meta元素可視區的內容可以包括多個逗號分隔的值，如initial-scale – 使用者最初看到頁面時的放大層級，對於Web應用程式，一個常見的設定是：

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

　　這個元素設定寬度為裝置的最大寬度，禁止使用者放大和縮小

html5開發之viewport使用