HTML meta viewport属性详细说明_HTML/Xhtml_网页制作

什么是Viewport

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤 到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

Viewport 基础

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：



width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放

关于viewport的一些问题

viewport并非只是ios上的独有属性，在android、winphone上同样也有viewport。它们要解决的问题是相同的，即无视设备的 真实分辨率，直接通过dpi，在物理尺寸和浏览器之间重设分辨率，这个分辨率和设备的分辨率无关。比如，你拿个3.5寸-320 * 480的iphone3 gs、3.5寸-640 * 960的iphone4或者9.7寸-1024*768的ipad2，虽然设备的分辨率不同,物理尺寸也不同，但你可以通过设置viewport让它们在 浏览器里有相同的分辨率。比如说，你的网站是800px宽，你可以通过设置viewport的width=800，来让你的网站在这三个不同的设备上都刚 好满屏显示你的网站。

以上的知识，相信每个对viewport稍有了解的同学应该都已经了解了。这不是我今天想说的重点。我想说明的是viewport在ios和android上的一些差异表现。

网上一搜关于viewport的知识，基本上全都是如下信息：



这段代码的意思是，让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。一都主流的web app都是这么设置的，它的作用其实是故意舍弃viewport，不缩放页面，这样dpi肯定和设备上的真实分辨率是一样的，不做任何缩放，网页会因此显 得更高细腻。玩ps的同学应该都知道，当你将一张1000 * 1000的图片直接缩放至500 * 500分变成什么样，对吧？图片的失真一定逃不掉。

但我要做的一个应用却恰恰相反，需要利用viewport，利用缩放。不论真实分辨率是多少，无论物理尺寸是多少，我都希望在浏览器里，能有统一的分辨 率，同时也不允许用户缩放。我用来测试的设备有：iphone4、ipad2、htc的g11、不知道什么厂商的aquos phone（android系统）、华硕的android pad、dell的winphone然后我一路遇到了如下问题：

1）如果不显示地设置viewport，那么width的默认为980。如果页面的所有元素宽度都小于980，此时width为980，如果页面最 宽的位置超过980，那么width等于最大宽度。总之，默认能将整个页面从左到右显示出来。如果设置了viewport，比如，只单纯地设置了 user-scalable=no，例如，那么ios下width还是按980显示（即默认就会通过dpi缩放），但android和winphone下却不会再缩放了，浏览器分辨率 和真实设置分辨率一致。

2）對於ios設備，設定width可以生效，但對於android，設定width並不會生效。 ios設備，縮放的比率即dpi是透過你設定的width和設定真實解析度自動計算的，而android下你設定width無效，你能設定的是一個特殊的欄位target-densitydpi，關於target-densitydpi可以參考一下這篇文章：http://hi.baidu.com/j_fo/blog/item /748361279ebccd18908f9d7d.html。也就是說，有三個變數：瀏覽器width、裝置真實width、dpi。 我們簡單地用個公式來表達它們之間的關係吧（並非真實關係，簡單說明用） 設備真實width * dpi = 瀏覽器width，這裡的三個變量，設備真實width是個我們不能操作的已知值，另外兩個變數我們可以設定一個來影響另一個，在ios中，我們能改的是瀏覽器width，dpi自動生成，而在android中，我們能改的是dpi，瀏覽器width自動生成。對於android，無論我們如何設定 width，也不會對瀏覽器width產生影響。

ps：這裡我另外再說一個奇怪的問題：在htc的g11裡（htc的手機我只有這一個，別的沒有測），如果設定了dpi而不顯示地設定width， 則user -scalable=no不生效，即是說：，無法阻止使用者縮放螢幕。我們需要顯示地設定一下width值，僅管這個值對android下的瀏覽器分辨屏並不產生任何影響（對ios還是會產生影響的），我們仍然要設定它，而且這個值一定要大於320，如果小於等於320，也無法讓user-scalable=no生效。這個問題只在htc 的g11手機上出現，在aquos phone就沒有這個問題。相容android真是件頭痛的事 @_@，未來還不知道有多少坑呢。而在winphone上，結果就更奇怪了：我給viewport的width設一個大於480的值，user- scalable=no就失效了，而設一個小於480的值，user-scalable=no能生效。但無論我給viewport的width設多少值， 對winphone真正顯示的width卻並不產生我預期的影響，透過target-densitydpi也沒有影響。設定width，如果小於480的 話，螢幕會縮放，但縮小的比例卻和我預期完全不一樣，我不知道它是按照什麼規律縮放的。不知道這是winphone的問題，還是dell實現的問題。

3）這條和上一條應該是直接相關的：ios設備在橫豎屏時，會自動調整dpi，無論橫屏還是豎屏，都能保證瀏覽器width等於viewport 中設定的值，所以橫豎螢幕的時候，頁面裡顯示的內容的大小是會自動縮放產生變化的。而android手機在橫豎屏的時候，不會改變dpi，在橫豎屏的時候， 網頁不會產生縮放。也因此，ios可以保證橫豎屏頁面都不會產生滾動條，滿屏顯示，而android卻無法保證這一點，橫著滿屏則豎著無法滿屏，反之亦 然。

4）對於ios設備，如果width顯示定義了，而頁面最寬的位置超過width的話，width無效，仍按最寬的寬度來顯示（不會有滾動條）。但此時會出現一個很奇怪的問題，當你將手機橫豎屏切換幾次之後，會發現你的頁面自動放大了，出現了滾動條，但其實放大後的寬度其實和你設的width也並沒有關係。為了防止這種情況出現，你需要將width的寬度設定得比頁面最寬的地方更大，或相同。