meta(蘋果發明的，桌面瀏覽器不支持)
###viewport
<meta name="viewport" content="" />
width [pixel_value | device-width] width
-- 直接去設置具體數值大部分的安卓手機是不支持的 但是IOS支持
initial-scale 初始縮放比例
user-scalable 是否允許縮放 （no||yes）,默認允許
minimum-scale 允許縮放的最小比例
maximum-scale 允許縮放的最大比例
target-densitydpi
-- dpi_value 70–400 //每英寸像素點的個數
-- device-dpi 設備默認像素密度2
-- high-dpi 高像素密度
-- medium-dpi 中等像素密度
-- low-dpi 低像素密度
-- webkit內核不再支持了
height
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,
initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,target-densitydpi=device-dpi" />
width
就是用來控制布局視口的大小的，width=device-width會使布局視口的大小變成理想視口的大小
（即獨立設備像素代表的大小）
95%的瀏覽器都支持width=device-width
旋轉（橫豎屏切換）：
當用戶旋轉設備時，布局視口的寬度通常會發生改變。因為橫豎屏時的理想視口尺寸不一樣
但ios的safari很例外，基於性能的考慮它的布局視口不會做出改變
initial-scale
縮放是根據理想視口來計算的，這個縮放不同於我們用戶的縮放，它會使布局視口跟隨着我們的視覺視口一起轉變
所以只設置inital-scale=1其實等同於只設置width=device-width
完美視口！！！！
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
完美視口不僅僅只能解決旋轉時的問題。
如果你頁面中存在太大的元素，你的meta標簽只使用width=device-width，initial-scale=1.0中的
一個，有些瀏覽器會擴展布局視口的寬度來容納這個元素，這里的兼容性很復雜，但你兩個都使用了，
大部分瀏覽器都不會改變布局視口了
width與inital-scale之間的沖突
布局視口在width與inital-scale產生分歧時會選擇他們中比較大的那一個
minimum-scale 允許縮放的最小比例
maximum-scale 允許縮放的最大比例
沒有這些指令，默認為20%-500%
有這些指令后可擴大到10%-1000%
安卓webkit不支持這兩個屬性（默認縮放范圍為25%-400%）
ie壓根不認識他們倆
