在移動端我們往往需要設(shè)置一些meta屬性來達(dá)到我們需要的一些效果撩荣。
1.比較重要的：
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1令漂，shrink-to-fit=no, viewport-fit=cover">
width=device-width：設(shè)備寬度带膜；
user-scalable=no：是否可以縮放疹味，可以設(shè)置為no或者0；
initial-scale=1.0：初始縮放比例
maximum-scale=1.0 ：最大縮放比例?
minimum-scale=1：最小縮放比例
shrink-to-fit=no ： 解決ios9中的bug? 識別屏幕寬度
viewport-fit=cover 解決蘋果x 劉海的問題
2. 針對蘋果手機(jī)：
<meta name="apple-mobile-web-app-capable" content="yes">
可以把頁面已a(bǔ)pp的方式添加到桌面
<meta name="apple-mobile-web-app-status-bar-style" content="black">
如果你把a(bǔ)pp添加到桌面丁侄，改狀態(tài)條的顏色
<meta content=yes name=apple-touch-fullscreen>
允許全屏展示
<meta name="format-detection" content="telephone=no,email=no">
禁止識別數(shù)字為電話,email
3.不常用的：
<meta name=App-Config content="fullscreen=yes,useHistoryState=yes,transition=yes">
應(yīng)用信息朋鞍，保留系統(tǒng)的歷史記錄已添，運(yùn)動效果
<meta http-equiv="Cache-Control" content="max-age=180">
max-age=180? 響應(yīng)時間
<meta http-equiv="x-dns-prefetch-control" content="on" />
好處：訪問快
解決 dns緩存問題
4.一些其他的：
<!-- 強(qiáng)制讓360瀏覽器用chrome內(nèi)核渲染頁面 -->
? ? ? ? <meta name="renderer" content="webkit">
<!-- 盡量用IE最新的模式渲染 -->
? ? ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持設(shè)備優(yōu)化妥箕，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
? ? ? ? <meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
? ? ? ? <meta name="MobileOptimized" content="320">
<!-- uc強(qiáng)制豎屏 -->
? ? ? ? <meta name="screen-orientation" content="portrait">
?<!-- QQ強(qiáng)制豎屏 -->
? ? ? ? <meta name="x5-orientation" content="portrait">
<!-- UC強(qiáng)制全屏 -->
? ? ? ? <meta name="full-screen" content="yes">
<!-- QQ強(qiáng)制全屏 -->
? ? ? ? <meta name="x5-fullscreen" content="true">
?<!-- UC應(yīng)用模式 -->
? ? ? ? <meta name="browsermode" content="application">
<!-- QQ應(yīng)用模式 -->
? ? ? ? <meta name="x5-page-mode" content="app">
