(原)前端知識雜燴（meta系列）

更新於 20160831

 

1. meta 移動端頭文件設置 （通常狀況下，逐條複製放在頭部就能夠了）

1.1 強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />

1.2 meta標籤是iphone設備中的safari私有meta標籤，它表示：容許全屏模式瀏覽 

<meta name="apple-mobile-web-app-capable" content="yes" />

1.3 meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

1.4 meta標籤表示：告訴設備忽略將頁面中的數字識別爲電話號碼

<meta name="format-detection" content="telephone=no, email=no" />

1.5 啓用360瀏覽器的極速模式(webkit)

<meta name="renderer" content="webkit" />

1.6 避免IE使用兼容模式

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

1.7 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，好比黑莓

<meta name="HandheldFriendly" content="true" />

1.8 微軟的老式瀏覽器（不過如今，能夠忽略了吧）

<meta name="MobileOptimized" content="320" />

1.9 uc強制豎屏

<meta name="screen-orientation" content="portrait" />

1.10 QQ強制豎屏

<meta name="x5-orientation" content="portrait" />

1.11 UC強制全屏

<meta name="full-screen" content="yes" />

1.12 QQ強制全屏

<meta name="x5-fullscreen" content="true" />

1.13 UC應用模式

<meta name="browsermode" content="application" />

1.14 QQ應用模式

<meta name="x5-page-mode" content="app" />

1.15 windows phone 點擊無高光

<meta name="msapplication-tap-highlight" content="no" />

1.16 清除瀏覽器中的緩存

清除瀏覽器中的緩存，它和其它幾句合起來用，就能夠使你再次進入曾經訪問過的頁面時，ie瀏覽器必須從服務端下載最新的內容，達到刷新的效果

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">

 

 

2. 關於header相關設置

2.1 設置瀏覽器標題的小icon

　　以下圖：
       

1 <link rel="icon" href="./images/logo2.png" type="image/x-icon" />
2 <link rel="shortcut icon" href="./images/logo2.png" type="image/x-icon" />