移動前端中常說的 viewport （視口）就是瀏覽器顯示頁面內容的螢幕區域
總結首先看一下meta元標籤極其屬性：
name
="viewport"
content
="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;"
>
屬性名取值
描述width
正整數 或?device-width
定義視口的寬度，單位為畫素
height
正整數 或?device-height
定義視口的高度，單位為畫素，一般不用
initial-scale
[0.0-10.0]
定義初始縮放值
minimum-scale
[0.0-10.0]
定義縮小最小比例，它必須小於或等於maximum-scale設定
maximum-scale
[0.0-10.0]
定義放大最大比例，它必須大於或等於minimum-scale設定
user-scalable
yes/no
定義是否允許使用者手動縮放頁面，預設值yes
width
width屬性被用來控制layout viewport（布局視口）的寬度，layout viewport（布局視口）寬度預設值是裝置廠家指定的。ios, android基本都將這個視口解析度設定為 980px。我們可以?width=320 這樣設為確切的畫素數，也可以設為device-width這一特殊值，一般為了自適應布局，普遍的做法是將width設定為device-width，例如：
name
="viewport"
content
="width=device-width, initial-scale=1, maximum-scale=1"
>
height
與width類似，但實際上卻不常用。
initial-scale
initial-scale用於指定頁面的初始縮放比例：
name
="viewport"
content
="initial-scale=1.5"
/>
maximum-scale
用於指定使用者能夠放大的最大比例，例如
name
="viewport"
content
="initial-scale=1,maximum-scale=3"
/>
minimum-scale
類似maximum-scale的描述，不過minimum-scale是用來指定頁面縮小比例的。通常情況下，不會定義該屬性的值，頁面太小將難以閱讀。
user-scalable
來控制使用者是否可以通過手勢對頁面進行縮放。該屬性的預設值為yes，可被縮放，你也可以將該值設定為no，表示不允許使用者縮放網頁。例如：
name
="viewport"
content
="user-scalable=no"
/>
移動端web 視口
視口 viewport 問題 寫乙個div寬度為320px，使用手機端比如iphone4開啟，應該是佔滿的，但是看效果？答 並沒有佔滿一行，此時html標籤的寬度是980px。因為 瀏覽器在顯示移動端網頁時，會預設給予980px的布局空間 即 布局視口空間 什麼是視口？可以簡單理解為 瀏覽器給網頁布...
web移動視口
視口 viewport 是用來約束 中最頂級塊元素的，即它決定了的大小。pc裝置 在pc裝置上viewport的大小取決於瀏覽器視窗的大小，以css畫素做為度量單位。通過以往css的知識，我們都能理解的大小是會影響到我們的網頁布局的，而viewport又決定了的大小，所以viewport間接的決定並...
移動端布局三種視口 移動端的三個視口
本文記錄學到的有關視口的內容，不足之處請指正。1 視口 有時會使用百分比來宣告寬度,如 html,body div假設div是body的子元素，這段css就表示該div佔body寬度的30 body沒有顯示宣告寬度，因此body占用了父包含塊html元素寬度的100 同樣的，html也沒顯示宣告寬度...