2. 程式人生 > >移動端web頁面知識小結之meta部分

移動端web頁面知識小結之meta部分

阿新 • • 發佈：2019-01-07 
查閱多個部落格，總結移動端web頁面meta部分的知識如下，供以後開發使用
PS:下面講到的知識點本人正在一一親測，如有錯誤未修正，請諒解！

參考來源：
    http://www.imooc.com/article/6361
    http://www.imooc.com/article/1115
    http://www.imooc.com/article/1064
    http://www.imooc.com/article/7323

<!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:[email protected]">[email protected]</a>
        </p>
    </body>
</html>

相關推薦

移動端web頁面知識小結之meta部分

查閱多個部落格，總結移動端web頁面meta部分的知識如下，供以後開發使用 PS:下面講到的知識點本人正在一一親測，如有錯誤未修正，請諒解！ 參考來源： http://www.imooc.com/article/6361 http://www.

移動端web頁面知識小結之畫素密度、解析度、螢幕尺寸

一直以來，本人對移動端解析度、畫素等概念傻傻分不清，特查閱多位牛人部落格後總結如下要點，以便日後檢視。 文件來源 螢幕解析度 是指螢幕上垂直方向和水平方向上的畫素個數，單位是px。常見取值 480X800,320X480等 IPhone手

移動端web頁面知識小結之畫素、物理畫素、邏輯畫素

一直以來，本人對移動端解析度、畫素等概念傻傻分不清，特查閱多位牛人部落格後總結如下要點，以便日後檢視。 文件來源 CSS畫素 CSS畫素是沒有實際大小的抽象單位，它是一個相對長度，它相對的是電腦或手機顯示器的解析度。 但在不同的

傾力總結40條常見的移動端Web頁面問題解決方案

web dropdown 文本 ie瀏覽器 -c cti nbsp name oct 1、安卓瀏覽器看背景圖片，有些設備會模糊。 用同等比例的圖片在PC機上很清楚，但是手機上很模糊，原因是什麽呢？ 經過研究，是devicePixelRatio作怪，因為手機分辨率太小

移動端web頁面input限制只能輸入數字

字段 數字 arp 設置 輸入 inpu highlight ios端 web頁面 <input type="number" pattern="[0-9]*" /> 如上所示，在安卓端設置input類型為number，可限制鍵盤只輸入數字，在ios端，要

移動端web頁面滾動不流暢，卡頓閃爍解決方案

方案 代碼 osi col 實現 移動端 ios端 出現 問題： 1.ios端的-webkit-overflow-scrolling屬性可控制頁面滾動效果，設置如下實現慣性滾動和彈性效果： -webkit-overflow-scrolling: touch 2.posi

移動端web頁面開發常用的頭部標簽設置

-h 方法 sca style 縮小 ipad edge 數字識別 ios 在移動端web頁面開發中，我們常需要設置各種頭部標簽以幫助瀏覽器更好的解析頁面，將頁面完美呈現，這裏列出了工作中常用的各種頭部標簽，以備查詢。 viewport <meta name=&quo

chrome瀏覽器遠端除錯移動端Web頁面

  1.Android系統的移動裝置 　　a.開啟 USB除錯模式；具體設定請自行百度； 　　b.用USB資料線連線手機裝置，並同意這臺計算機進行USB除錯； 　　c.在瀏覽器位址列輸入chrome://inspect 或者about:inspec；可以顯示出裝置的名稱，在下圖中

移動端web頁面底部固定元素（軟鍵盤彈出）解決方案

底部固定的輸入框，如圖： 解決方案如下 <div> <Header/> // absolute, top:0 <Footer/> // absolute, bottom:0 <Content/> // absolute

40條常見的移動端Web頁面問題解決方案

1、安卓瀏覽器看背景圖片，有些裝置會模糊。 用同等比例的圖片在PC機上很清楚，但是手機上很模糊，原因是什麼呢？ 經過研究，是devicePixelRatio作怪，因為手機解析度太小，如果按照解析度來顯示網頁，這樣字會非常小，所以蘋果當初就把iPhone 4的960640解析度，

移動端web頁面文字框+fixed

還是保留之前的態度，依然不推薦在 Android下使用 iScroll。在開發專案時，可以考慮分為兩個版本：iOS下使用 iScroll的解決方案，Android下使用 position:fixed。 移動端業務開發，iOS 下經常會有 fixed 元素和輸入框(input 元

移動端Web頁面適配方案

移動端Web頁面，即常說的H5頁面、手機頁面、webview頁面等。 手機裝置螢幕尺寸不一，做移動端的Web頁面，需要考慮在安卓/IOS的各種尺寸裝置上的相容，這裡總結的是針對移動端裝置的頁面，設計與前端實現怎樣做能更好地適配不同螢幕寬度的移動裝置。 適配的目標 引用一文章的描述： 在不同尺寸的手機裝置

移動端web頁面自適應和rem

web頁面的自適應開發，要求就是跨平臺，跨瀏覽器，一般mobile+pc，前幾天寫了幾個pc端全屏頁面，用的是百分比，在手機上看了下效果 相去甚遠。這麼看來mobile+pc 的自適應 有些時候就是個偽命題。 那對於移動端的自適應就 一般的宣傳頁面全屏滑動那種，用百分比，若

開發移動端web頁面時候遇到的問題以及解決方法

1 邊框圓角出現缺失 原因是該標籤沒有設定超出隱藏 導致子覆蓋了父 2 文字輸入框游標的顏色 caret-color 3 ios下點選a button input -----等標籤出現灰色的背景 a,button,input,optgroup,select,textarea {

移動端web頁面input+fixed佈局bug總結

最近在做移動端，又涉及到了 fixed（固定位置定位）的問題，在使用fixed的過程中，遇到了一些的問題，並且部分問題無法找到較好的解決方案。下面 是我在網上找到的一些解決方法，僅供參考： 正常介面 圖中被紅色選中區域為 position:fixed 元素 問題

移動端web頁面開發中遇到的三個“小坑”

目前自己接觸的移動端專案很有限，所以發現的坑不是那麼多，暫時只記錄下最近在解決的“小坑”。 一、簡單的移動端頁面最好不用JS外掛 在開發中使用自己熟悉的框架或者外掛對自己的開發效率幫助是很大的，但是

js移動端插件iosSelect.js之頁面中多次使用該插件的問題

.cn 插件 sselect com 自己 his 但是 調用次數 select iosselect是在webapp下的一個picker組件，可以輕松實現各類選擇器效果。比如地區選擇 時間選擇 日期選擇等。網上教程是很多的，github詳解：https://github.

移動端web開發初探之Vuejs的簡單實戰

參考 細節 重要 進行 標簽 樣式 mob 優化 view 這段時間在做的東西，是北郵人論壇APP的註冊頁。這個註冊頁是內嵌的網頁，因為打算安卓和IOS平臺同時使用。因此實際上就是在做移動端的web開發了。 在這過程中遇到了不少有意思的東西。 DEMO的github地址在這

移動端Web開發除錯之Weinre除錯教程

在設計師與前端開發人員的努力下，一個WebApp出爐了，可是測試人員說了一堆的問題：某某機型下頁面表現不一致，某某系統下頁面如何如何，某某系統瀏覽器下頁面怎麼怎麼滴。看著滿滿的測試彙總文件，我們曾經在一個又一個知名或不知名的手機終端上重複著這些工作：仔細的排查程式碼，alert可疑的變數，甚至不惜重

移動端web如何讓頁面強制橫屏

前段時間公司針對直播服務做了改版升級，APP客戶端支援了橫屏和豎屏推流/播放。 在這個背景下，雖然觸屏未做改動，但本著敏而好學，不斷探索的精神，針對如何讓web頁面強制橫屏顯示，做了一下試驗研究。 首先，當用戶豎屏開啟時，提示說你要把手機轉過來是在是件很傻×的事情。這時如果使用者沒開啟手機