網頁meta標籤總結

時間 2019-11-09
標籤網頁 meta 標籤總結欄目 HTML 简体版
原文原文鏈接
文章摘抄自網絡。javascript
參考文章：http://www.cnblogs.com/lpt1229/p/5628631.htmlhtml
http://blog.csdn.net/aiolos1111/article/details/51754917java
http://www.tuicool.com/articles/A7j2QjFweb
http://www.cnblogs.com/lovesong/p/5745893.htmlchrome
<!DOCTYPE html>
<!-- 使用 HTML5 doctype，不區分大小寫 -->
<html lang="zh-cmn-Hans">
<!--更加標準的 lang 屬性寫法, zh-CN已經不在支持 http://zhi.hu/XyIa -->

<head>
    <meta charset="utf-8">
    <!-- 啓用360瀏覽器的極速模式(webkit)
         360 使用Google Chrome Frame ,360 瀏覽器就會在讀取到這個標籤後，當即切換對應的極速核。 另外爲了保險起見再加入優先使用IE最新版本和Chrome,這樣寫能夠達到的效果是若是安裝了 Google Chrome Frame，則使用 GCF 來渲染頁面，若是沒有安裝 GCF，則使用最高版本的 IE 內核進行渲染-->
    <meta name="renderer" content="webkit">
    <!-- 優先使用IE最新版本和Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 頁面關鍵詞 -->
    <meta name="keywords" content="your keywords" />
    <!-- 頁面描述內容 description -->
    <meta name="description" content="your description" />
    <!-- 爲移動設備添加viewport,viewport可讓佈局在移動瀏覽器上顯示的更好.
          注：width=device-width 會致使 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊的bug.
         content 參數： 
                width viewport 寬度(數值/device-width) 
                height viewport 高度(數值/device-height) 
                initial-scale 初始縮放比例 
                maximum-scale 最大縮放比例 
                minimum-scale 最小縮放比例 
                user-scalable 是否容許用戶縮放(yes/no)
        -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximu-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <!-- 若是你的網站不是響應式的，請不要使用 initial-scale 或者禁用縮放。
        <meta name="viewport" content="width=device-width,user-scalable=yes">
        -->
    <!-- 禁止百度轉碼:
            經過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，很是之噁心。能夠經過這個meta標籤來禁止它： -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!-- UC強制豎屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ強制豎屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC強制全屏 -->
    <meta name="full-screen" content="true">
    <!-- QQ強制全屏  -->
    <meta name="x5-screen" content="true">
    <!-- UC應用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ應用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 點擊無高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- -------- -->
    <!-- IOS設備 begin -->
    <!-- -------- -->
    <!-- 添加到主屏後的標題 (IOS6 新增) -->
    <meta name="apple-mobile-web-app-title" content="標題內容">
    <!-- 啓用WebApp全屏模式(IOS)，當網站添加到主屏幕後再點擊進行啓動時，可刪除蘋果默認的狀態欄和菜單欄(從瀏覽器跳轉或輸入連接進入時沒有效果) -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <!--有人反應這句沒有效果，本人還未測試-->
    <!-- 設置蘋果狀態欄顏色 ，只有在apple-mobile-web-app-capable" content="yes"時生效
            content的值：
                default:狀態欄背景爲白色
                black:狀態欄背景爲黑色
                black-translucent：狀態欄背景爲半透明，若是設置爲default或black，網頁內容從狀態欄底部開始。若是設置爲black-translucent,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋
        -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 添加智能App廣告條 Smart App Banner (IOS 6+ Safari) -->
    <meta name="apple-itunes-app" content="app-id=myAppStoreID,affiliate-data=myAffiliateData,app-argument=myURL">
    <!-- 在 iOS Safari （其餘瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數字處理爲電話連接，好比：
             7位數字，形如：1234567 
             帶括號及加號的數字，形如：(+86)123456789 
             雙鏈接線的數字，形如：00-00-00111 
             11位數字，形如：13800138000 
             可能還有其餘類型的數字也會被識別。
         能夠經過以下的meta來關閉電話號碼的自動識別 -->
    <meta name="format-detection" content="telephone=no">
    <!-- 移動端郵箱識別（Android）
            在安卓上會對符合郵箱格式的字符串進行識別，能夠經過以下的meta來關閉郵箱的自動識別：
        -->
    <meta name="format-detection" content="email=no">
    <!-- -------- -->
    <!-- IOS設備 end-->
    <!-- -------- -->
    <!-- -------- -->
    <!-- IOS圖標 begin -->
    <!-- -------- -->
    <!-- 添加到主屏後的APP圖標 指定web app添加到主屏後的圖標路徑，有兩種略微不一樣的方式：
            apple-touch-icon：在IOS6及如下的版本會自動將圖片自動處理成圓角和高光等效果（IOS7開始已使用扁平化的設計風格） 
            apple-touch-icon-precomposed：禁止系統自動添加效果，直接顯示設計原圖。 iPhone 和 iTouch，默認 57×57 像素，必須有！
        理論上須要指定size屬性來爲不一樣的設備提供不一樣的圖標，但一般來講，咱們只需提供一個114 x 114 pixels大小的圖標便可 
        -->
    <!-- 設計原圖 -->
    <!-- iPhone 和 iTouch，默認 57×57 像素，必須有 -->
    <link rel="apple-touch-icon-precomposed" href="short_cut_57x57.png">
    <!-- iPad，72×72 像素，能夠沒有，但推薦有 -->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="short_cut_72x72.png">
    <!-- Retina iPhone 和 Retina iTouch，114×114 像素，能夠沒有，但推薦有 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="short_cut_114x114.png">
    <!-- Retina iPad，144×144 像素，能夠沒有，但推薦有 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="short_cut_114x114.png">
    <!-- IOS 圖標大小在iPhone 6 plus上是180×180，iPhone 6 是120×120。 適配iPhone 6 plus，則須要在中加上這段-->
    <link rel="apple-touch-icon-precomposed" sizes="180×180" href="retinahd_icon.png">
    <!-- 添加高光效果， -->
    <link rel="apple-touch-icon" href="short_cut_114x114.png">
    <!-- -------- -->
    <!-- IOS圖標 end -->
    <!-- -------- -->
    <!-- -------- -->
    <!-- IOS Web app啓動動畫 begin -->
    <!-- -------- -->
    <!-- IOS Web app啓動動畫
        因爲iPad 的啓動畫面是不包括狀態欄區域的。因此啓動圖片須要減去狀態欄區域所對應的方向上的20px大小，相應地在retina設備上要減去40px的大小（landscape：橫屏 | portrait：豎屏）
但iPhone 和 iPod touch 的啓動畫面是包含狀態欄區域的。
        -->
    <!-- iPad 豎屏 768 x 1004（標準分辨率） -->
    <link href="apple-touch-startup-image-768x1004.png" sizes="768x1004" media="(device-width:768px) and (orientation:portrait)" rel="apple-touch-startup-image">
    <!-- iPad 豎屏 1536×2008（Retina） -->
    <link href="apple-touch-startup-image-1536x2008.png" sizes="1536x2008" media="(device-width:1536px) and (orientation:portrait) and (-webkit-device-pixel-ratio:2)" rel="apple-touch-startup-image">
    <!-- iPad 橫屏 1024×748（標準分辨率） -->
    <link href="apple-touch-startup-image-1024x748.png" sizes="1024x748" media="(device-width:768px) and (orientation:landscape)" rel="apple-touch-startup-image">
    <!-- iPad 橫屏 2048×1496（Retina） -->
    <link href="apple-touch-startup-image-2048x1496.png" sizes="2048x1496" media="(device-width:1536px) and (orientation:landscape) and (-webkit-device-pixel-ratio:2)" rel="apple-touch-startup-image">
    <!-- iPhone/iPod Touch 豎屏 320×480 (標準分辨率) -->
    <link href="apple-touch-startup-image-320x480.png" media="(device-width:320px)" rel="apple-touch-startup-image">
    <!-- iPhone/iPod Touch 豎屏 640×960 (Retina) -->
    <link href="apple-touch-startup-image-640x960.png" sizes="640×960" media="(device-width:320px) and (-webkit-device-pixel-ratio:2)" rel="apple-touch-startup-image">
    <!-- iPhone 5/iPod Touch 5 豎屏 640×1136 (Retina) -->
    <link href="apple-touch-startup-image-640x1136.png" sizes="640×1136" media="(device-width:320px) and (-webkit-device-pixel-ratio:2)" rel="apple-touch-startup-image">
    <!--  iPhone 6對應的圖片大小是750×1294，iPhone 6 Plus 對應的是1242×2148 ！-->
    <link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)">
    <link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">
    <!-- IOS Web app啓動動畫 end -->
    <!-- --------------------- -->
    <!-- 下面三個是清除緩存  微信瀏覽器緩存嚴重又無刷新；這個方法調試的時候很方便 -->
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <!-- 移動端樣式 -->
    <style>
    /*移動端定義字體的代碼*/
    
    body {
        font-family: Helvetica
    }
    </style>
</head>

<body>
    <div>
        參考來源：
    </div>
    <p>開啓電話功能
        <a href="tel:123456">123456</a>
    </p>
    <p>開啓短信功能
        <a href="sms:123456">123456</a>
    </p>
    <p>開啓長按郵箱地址彈出郵件發送的功能
        <a href="mailto:d@gmail.com">d@gmail.com</a>
    </p>
</body>

</html>
相關標籤/搜索