meta 之 viewport—手機上影響網頁查看方式的神奇的“顯示器”

在 讓WebApp在iOS上模擬NativeApp的效果 中提到了對頁面進行一些 meta 標記的添加，實現類似 Native App 的表現，不過這種表現只是外在的，接下來看看頁面內容的顯示問題。

我們已知 viewport 在手機網頁中有重要作用，但它具體起了哪些作用？

viewport其事

viewport 直譯爲“視口”，它的作用可以這麼想象：如同玩一個3D遊戲，你能通過顯示器看到3D場景，但一般場景大小遠大於顯示器屏幕大小，你需要移動和縮放場景之後，才能看到全部的場景。如果你用CSS寫過3D的動畫效果，聯想一下 -webkit-perspective 屬性:D

對，它就是手機上影響網頁查看方式的神奇的“顯示器”。它的尺寸決定你能看到的頁面的尺寸，然後將 viewport 通過屏幕展示，你就可以看到頁面內容了。

一般的桌面端網頁都不會添加 viewport 設置，用智能手機查看這些頁面時，是在設備的默認 viewport 設置下顯示的。不同 瀏覽器的默認 viewport 並不一致，比如 Apple Safari 默認是 980px，Android Webkit 默認是 800px，Windows Phone IE 默認是1024px，而桌面端頁面最小寬度大概在800px左右。

meta 之 viewport

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

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

2、height :和width相對應，指定高度

3、initial-scale : 初始縮放比例，頁面第一次加載時的縮放比例

4、maximum-scale : 允許用戶縮放到的最大比例，範圍從0到10.0

5、minimum-scale : 允許用戶縮放到的最小比例，範圍從0到10.0

6、user-scalable : 用戶是否可以手動縮放，值可以是：①yes、 true允許用戶縮放；②no、false不允許用戶縮放