一些實用的瀏覽器meta

標籤： 兼容性 meta

---

通用

<!--聲明文檔使用的字符編碼-->
    <meta charset=’utf-8′>    
    <!--viewport定義-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <!--說明：忽略識別頁面中的電話號碼,郵箱，地址-->
    <meta content="telephone=no,email=no,adress=no" name="format-detection" />
    <!-- 添加 seo頁面關鍵字 -->
    <meta name="keywords" content="" />
    <!-- 添加 seo頁面描述 -->
    <meta name="description" content="" />
    <!-- 設置頁面不緩存 -->
    <meta http-equiv=」pragma」 content=」no-cache」>
    <meta http-equiv=」cache-control」 content=」no-cache」>
    <meta http-equiv=」expires」 content=」0″>
    <!-- 優先使用最新版本 IE 和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

---

360瀏覽器

強制瀏覽器在極速橫式下顯示
html <!-- 開啓極速模式 --> <meta name="renderer" content="webkit|ie-stand|ie-comp">

• IE瀏覽器有一個兼容模式（IE）和一個極速模式（chrome）,webkit指的是chrome內核，ie-stand指的IE標準內核，ie-comp指的是IE兼容內核，詳細說明請查看360瀏覽器官方解釋

---

QQ瀏覽器

<!-- 設置屏幕方向 -->
    <meta name="x5-orientation" content="portrait|landscape" />
    <!-- 設置全屏 -->
    <meta name="x5-fullscreen" content="true" />
    <!-- 設置屏幕模式 -->
    <meta name="x5-page-mode" content="app" />

1. 設置屏幕方向爲橫屏仍是豎屏
2. 設置是否全屏，yes表示強制瀏覽器全屏
3. QQ瀏覽器應用模式
   - - -

UC瀏覽器

<!-- 橫屏、豎屏顯示 -->
    <meta name="screen-orientation" content="portrait|landscape">
    <!-- 設置是否全屏 -->
    <meta name="full-screen" content="yes">
    <!-- 縮放不出滾動條 -->
    <meta name="viewport" content="uc-fitscreen=no|yes"/>
    <!-- 排版 -->
    <meta name="layoutmode" content="fitscreen|standard" />
    <!-- 夜間模式 -->
    <meta name="nightmode" content="enable|disable"/>
    <!-- 應用模式 -->
    <meta name="browsermode" content="application"/>
    <!-- 強制圖片顯示 -->
    <meta name="imagemode" content="force"/>

1. 設置屏幕方向爲橫屏仍是豎屏portrait爲橫屏 | landscapeo爲堅屏。
2. 是否全屏，yes表示強制瀏覽器全屏，no則反之。
3. 縮放不出滾動條。設置no後用戶縮放與標準瀏覽器縮放一直，設置爲yes後，用戶縮放金放到圖片和文字，不出現橫向滾動條。
4. 縮放不出滾動條。設置no後用戶縮放與標準瀏覽器縮放一直，設置爲yes後，用戶縮放金放到圖片和文字，不出現橫向滾動條。
5. 排版，fitscreen模式簡化頁面處理，適合頁面閱讀節省流量，standard模式和標準瀏覽器一致；一旦設置layoutmode meta後，用戶使用瀏覽器提供的的排版模式選項將會無效。
6. nightmode的值設置爲disable後，瀏覽器的夜間模式就不起做用。
7. UC 瀏覽器爲了節省流量，爲用戶提供了無圖模式。不過咱們能夠經過這個屬性來強制瀏覽器顯示圖片，而有時候爲了提升用戶體驗，無圖模式仍是有必要的，對於有些 圖片是不得不顯示的，如：驗證碼，咱們也能夠單獨設置其爲顯示模式，其餘圖片可根據用戶的設置來進行彈性選擇。

Safari瀏覽器

<!-- 容許全屏模式瀏覽 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 定義safari頂端狀態條的樣式 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 開啓WEB APP 支持 -->
    <meta name="apple-touch-fullscreen" content="yes">
    <!-- WEB APP名稱 -->
    <meta name="apple-mobile-web-app-title" content="APP名">
    <!-- 隱藏頂部 -->
    <meta name="viewport" content="minimal-ui">

1. 在iOS上，用戶將網頁添加到主屏後，再從主屏幕打開這個網頁，能夠隱藏瀏覽器的地址欄和下面的toolbar；
2. 其值有三個： default（白色）black（黑色） black-translucent（灰色半透明）。
3. 開啓對web app程序的支持
4. 是指在發送到屏幕的時候默認的命名。
5. 讓網頁在加載時即可隱藏頂部的地址欄與底部的導航欄。

我的所知有限，若是誰還有更實用的瀏覽器meta，歡迎留意補充，共勉！