前言
之前學習前端中，對meta標簽的了解僅僅只是這一句。
| <meta charset="UTF-8"> |
但是打開任意的網站，其head標簽內都有一列的meta標簽。比如我們武林站長站網站，但是自己卻很不熟悉，于是把meta標簽加入了學習計劃的最前方。
| <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no”> |
這個用的最多，width和height指令分別指定視區的邏輯寬度和高度。他們的值要么是以像素為單位的數字，要么是一個特殊的標記符號。width指令使用device-width標記可以指示視區寬度應為設備的屏幕寬度。類似地height指令使用device-height標記指示視區高度為設備的屏幕高度。
user-scalable指令指定用戶是否可以縮放視區，即縮放Web頁面的視圖。值為yes時允許用戶進行縮放，值為no時不允許縮放
initial-scale指令用于設置Web頁面的初始縮放比例。默認的初始縮放比例值因智能手機瀏覽器的不同而有所差異。通常情況下設備會在瀏覽器中呈現出整個Web頁面，設為1.0則將顯示未經縮放的Web文檔。
maximum-scale和minimum-scale指令用于設置用戶對Web頁面縮放比例的限制。值的范圍為0.25至10.0之間。與initial-scale相同，這些指令的值是應用于視區內容的縮放比例。
所有智能手機瀏覽器都支持ViewPort <meta>標記的width和user-scalabel指令。但是Opera Mobile不使用user-scalable指令，而是主張用戶應始終保留在移動瀏覽器中縮放Web頁面的能力。
下面還真用得少
devicePixelRatio
window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dips
fit-to-screen網站自適應屏幕
如果content的值小于或等于screen width 網站自適應屏幕fit-to-screen將被關閉網站不會隨著瀏覽器拉伸縮放
如果content的值大于screen width;fit-to-screen將開啟
蘋果瀏覽器相關
2015-07-08
| <meta name=”viewport” content=”minimal-ui”> |
在iOS 7.1的Safari中為meta標簽新增minimal-ui屬性，讓網頁在加載時便可隱藏頂部的地址欄與底部的導航欄。
| <meta name=”apple-mobile-web-app-capable” content=”yes”> |
是否啟動webapp功能 設置為yes 網站就會在滿屏模式full-screen mode刪除默認的蘋果工具欄和菜單欄
| <meta name=”apple-touch-fullscreen” content=”yes”> |
開啟對web app程序的支持
| <meta name=”format-detection” content=”telephone=no”><meta name=”format-detection” content=”email=no” /> |
