一、大眾機型常用meta標籤name的設定

1、name之viewport

<meta name="viewport" content="">
說明：螢幕的縮放

content的幾個屬性：
    width viewport的寬度[device-width | pixel_value]width如果直接設定pixel_value數值，大部分的安卓手機不支援，但是ios支援；
    height – viewport 的高度 （範圍從 223 到 10,000 ）
    user-scalable [yes | no]是否允許縮放
    initial-scale [數值] 初始化比例（範圍從 > 0 到 10）
    minimum-scale [數值] 允許縮放的最小比例
    maximum-scale [數值] 允許縮放的最大比例
    target-densitydpi 值有以下（一般推薦設定中等響度密度或者低畫素密度，後者設定具體的值dpi_value，另外webkit核心已不準備再支援此屬性）
         -- dpi_value 一般是70-400//沒英寸畫素點的個數
         -- device-dpi裝置預設畫素密度
         -- high-dpi 高畫素密度
         -- medium-dpi 中等畫素密度
         -- low-dpi 低畫素密度

完整案例：

[html] view plain copy  print?

1. <metaname="viewport"content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">

2、name之format-detection忽略電話號碼和郵箱

<meta name="format-detection" content="telephone=no">
說明：忽略頁面中的數字識別為電話號碼

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

說明：忽略頁面中的郵箱格式為郵箱

也可以寫成：

[html] view plain copy  print?

1. <metaname="format-detection"content="telphone=no, email=no"/>

3、name之設定作者姓名及聯絡方式

說明：設定作者姓名及聯絡方式

<meta name="author" contect="name, [email protected]

" />

4、其他

    <!-- 宣告文件使用的字元編碼 -->
    <meta charset='utf-8'>

    <!-- 優先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <!-- 頁面描述 -->
    <meta name="description" content="不超過150個字元"/>

    <!-- 頁面關鍵詞 -->
    <meta name="keywords" content=""/>

    <!-- 搜尋引擎抓取 -->
    <meta name="robots" content="index,follow"/>

    <!-- 啟用360瀏覽器的極速模式(webkit) -->
    <meta name="renderer" content="webkit">

    <!-- 避免IE使用相容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 不讓百度轉碼 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <!-- 針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">

    <!-- 微軟的老式瀏覽器 -->
    <meta name="MobileOptimized" content="320">

    <!-- uc強制豎屏 -->
    <meta name="screen-orientation" content="portrait">

    <!-- QQ強制豎屏 -->
    <meta name="x5-orientation" content="portrait">

    <!-- UC強制全屏 -->
    <meta name="full-screen" content="yes">

    <!-- QQ強制全屏 -->
    <meta name="x5-fullscreen" content="true">

    <!-- UC應用模式 -->
    <meta name="browsermode" content="application">

    <!-- QQ應用模式 -->
    <meta name="x5-page-mode" content="app">
   

    <!-- 新增 RSS 訂閱 -->
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>

    <!-- 新增 favicon icon -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>


    <!-- sns 社交標籤 begin -->
        <!-- 參考微博API -->
        <meta property="og:type" content="型別" />
        <meta property="og:url" content="URL地址" />
        <meta property="og:title" content="標題" />
        <meta property="og:image" content="圖片" />
        <meta property="og:description" content="描述" />
    <!-- sns 社交標籤 end -->

    <!-- Windows 8 磁貼顏色 -->
    <meta name="msapplication-TileColor" content="#000"/>

    <!-- Windows 8 磁貼圖示 -->
    <meta name="msapplication-TileImage" content="icon.png"/>

     <!-- windows phone 點選無高光 -->
    <meta name="msapplication-tap-highlight" content="no">

二、ios系統的meta/link設定：

1、開啟對web app程式的支援

<meta name="apple-mobile-web-app-capable" content="yes">
說明：
    網站開啟對web app程式的支援，其實意思就是刪除預設的蘋果工具欄和選單欄，開啟全屏顯示

2、 改變頂部狀態條的顏色；

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
說明：
    在 web app 應用下狀態條（螢幕頂部條）的顏色；
    預設值為 default（白色），可以定為 black（黑色）和 black-translucent（灰色半透明）；

3、設定“新增到主螢幕圖示

Safari 瀏覽器有一個“新增到主螢幕”的功能，使用者可以像儲存書籤一樣把一個網站新增到主螢幕，下次使用者直接點選主螢幕上的圖示就能進入網站。

這個功能不僅方便使用者快速訪問我們的網站，而且也使我們的 WebApp 更像一個原生應用

因為 iOS 解析度，所以 icon.png 圖片的尺寸也各不相同，我們可以通過sizes屬性來分別定義，iOS 系統會自動獲取向匹配的圖片：

[html] view plain copy  print?

1. <spanstyle="font-size:14px;"><!-- iOS 圖示 begin -->
2.         <linkrel="apple-touch-icon-precomposed"href="/apple-touch-icon-57x57-precomposed.png"/>
3.         <!-- iPhone 和 iTouch，預設 57x57 畫素，必須有 -->
4.         <linkrel="apple-touch-icon-precomposed"sizes="114x114"href="/apple-touch-icon-114x114-precomposed.png"/>
5.         <!-- Retina iPhone 和 Retina iTouch，114x114 畫素，可以沒有，但推薦有 -->
6.         <linkrel="apple-touch-icon-precomposed"sizes="144x144"href="/apple-touch-icon-144x144-precomposed.png"/>
7.         <!-- Retina iPad，144x144 畫素，可以沒有，但推薦有 -->
8. <!-- iOS 圖示 end --></span>

擴充套件：

為使用者加上提示

通過新增一個JavaScript程式碼來邀請使用者新增到主螢幕，該庫使用了HTML5的本地儲存跟蹤是否已經顯示過了，以避免重複出現。

4、設定桌面圖示的標題，

為了在主屏達到最好的顯示效果，title最好限制在六個中文長度內，超長的內容會被隱藏：

新增到主屏後的標題（iOS 6 新增）

[html] view plain copy  print?

1. <spanstyle="font-size:14px;"><metaname="apple-mobile-web-app-title"content="標題"></span>

5、設定啟動畫面

當用戶點選主屏圖示開啟 WebApp 時，系統會展示啟動畫面，在未設定情況下系統會預設顯示該網站的首頁截圖，當然這個體驗不是很好，所以我們需要通過以下程式碼來自定義啟動畫面：

[html] view plain copy  print?

1. <linkrel="apple-touch-startup-image"href="Startup.png"/>

根據 iOS 裝置的解析度，其啟動畫面的圖片尺寸也各不相同所以：

[html] view plain copy  print?

1. <!-- iOS 啟動畫面 begin -->
2.         <linkrel="apple-touch-startup-image"sizes="768x1004"href="/splash-screen-768x1004.png"/>
3.         <!-- iPad 豎屏 768 x 1004（標準解析度） -->
4.         <linkrel="apple-touch-startup-image"sizes="1536x2008"href="/splash-screen-1536x2008.png"/>
5.         <!-- iPad 豎屏 1536x2008（Retina） -->
6.         <linkrel="apple-touch-startup-image"sizes="1024x748"href="/Default-Portrait-1024x748.png"/>
7.         <!-- iPad 橫屏 1024x748（標準解析度） -->
8.         <linkrel="apple-touch-startup-image"sizes="2048x1496"href="/splash-screen-2048x1496.png"/>
9.         <!-- iPad 橫屏 2048x1496（Retina） -->
10.         <linkrel="apple-touch-startup-image"href="/splash-screen-320x480.png"/>
11.         <!-- iPhone/iPod Touch 豎屏 320x480 (標準解析度) -->
12.         <linkrel="apple-touch-startup-image"sizes="640x960"href="/splash-screen-640x960.png"/>
13.         <!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->
14.         <link

    相關推薦

    html5手機網站需要加的那些meta/link標籤，html5 meta全解

    一、大眾機型常用meta標籤name的設定 1、name之viewport <meta name="viewport" content=""> 說明：螢幕的縮放 content的幾個屬性：     width viewport的寬

    html5手機網站需要加的那些meta標籤，手機網站自適應

    1、移動網站要加的html5相關meta和標籤    a、<!-- 強制讓文件與裝置的寬度保持1：1 -->    <meta name="viewport" content="width=device-width, initial-scale=1, mi

    表單補充，labed標籤，html5新增表單元素和語義

    <h2>label標籤的使用</h2>     <!--label標籤給予人們友好的操作，選中時，點中文字時自動選中文字框-->     <label>使用者名稱:<input type="text"></la

    HTML5手機端網站開發meta設定

    前端在進行手機端頁面開發時，需要在頁面head中完成很多基本設定，確保頁面在手機端的顯示效果。在開發的過程中，是通過meta標籤的設定。1.viewport標籤<meta name="viewport" content="width=device-width, init

    網站添加手機短信功能

    lec class write 接口 ont nbsp http encoding enc 本人親自試用可以用，現在的手機短信服務商很多，可以自己去找個， 我這個用的是齊魯商務通接口調用dotNet樣例.zip的接口，也是用的不錯的，如果有需要的話我可以給提供 本例子用的

    手機網站實現一鍵撥號及html5簡訊傳送功能JS程式碼(微信適用)

    微信微網站、手機網頁一鍵撥號的撥打電話和傳送簡訊功能JS程式碼採用url連結的方式，在主流瀏覽器進行一鍵撥打電話和發簡訊的功能。1.最常用手機網站頁面JS實現一鍵撥號的電話撥打功能：一鍵撥號點選連結後，自動跳轉到撥號介面，顯示號碼，並提示撥打。支援大部分的瀏覽器，但是在QQ瀏覽器上支援不好。2.最常用手機網站

    網站需要備案？對這個流程表示呵呵噠- -快速免備案方法

    支持 content lang order borde 惡心 doc 適合 src 對於備案流程，惡心到我了??即將完成的時候，發現真尼瑪麻煩！！！！！菜鳥還沒工作不舍得買好服務器，還是等以後穩定了再備案吧～～ 僅僅適合用於個人網站，且對於搜索引擎不友好，本人主要用於快速訪

    網站添加用戶風險測評

    數據庫 per 添加用戶 測試 評測 信息 測評 ati 需要 首先在數據庫用戶表中增加字段，用來存儲用戶風險評測的分數； 然後修改對應用戶類的屬性，增加風險評測分數，get和set方法； 然後再controller中增加用戶添加和修改風險測評的方法； 同時，修改dao中保

    Bootstrap——網站添加字體圖標

    str itcast size svg nbsp col -o for font-face @font-face { font-family: ‘itcast‘; src: url(‘../font/MiFie-Web-Font.eot‘) format(‘emb

    怎麽樣提高手機網站的用戶瀏覽體驗

    觸摸 資源 出發 給人 發展 ... 設計 isp 特性 “21世紀是智能手機的天下，是移動互聯網的主場”！隨著智能手機的普及與移動互聯網飛速發展，廣大的網民用戶都開始習慣使用手機和其他智能移動設備來進行上網。移動設備的上網的便捷，讓網民用戶喜歡上了利用移動設備進行網上的活

    android--手機桌面添加網址鏈接圖標(解決方式二)

    解決 eat ring java ndb resources mission dbr 快捷鍵 前一篇文章主要是通過打開app來實現打開網址的功能。盡管實現起來比較簡單，但從效果上來說還是有缺陷。 本文將借助於Broadcast廣播機制來實現桌面圖標鏈接網址的功能。不僅效

    java多線程讀一個變量需要加鎖嗎？

    多線程 final關鍵字 一個 ati 關鍵字 java多線程 其他 同時 關聯 如果只是讀操作，沒有寫操作，則可以不用加鎖，此種情形下，建議變量加上final關鍵字； 如果有寫操作，但是變量的寫操作跟當前的值無關聯，且與其他的變量也無關聯，則可考慮變量加上volat

    [支付寶]手機網站支付快速接入

    tps alt wke mba resp pan 新版 字符 手機網站支付 參考開發文檔：https://doc.open.alipay.com/docs/doc.htm?spm=a219a.7629140.0.0.FjX7f6&treeId=193&art

    一個合格的H5響應式網站需要具備哪些功能

    網絡營銷 電子 內容 高效 時也 宣傳 市場調研 分享 實時 CV隨著經濟全球化和電子商務經濟的到來，企業建站和開展電子商務是一個不可回避的現實，否則當你的競爭對手正在通過INTERNET共享信息，通過電子商務降低成本，拓展銷售渠道時，你卻只能坐失良機。此時更應該考慮的是如

    建設手機網站有哪些好處？真相來了

    手機網站 微網站 網站建設 手機端區別於電腦，其網絡訪問速度與流量都是有限制的，同時在顯示和功能方面與PC端都有著很大的差異。現在很多企業都是PC端官網和手機端官網兩者兼有，那麽擁有一個手機網站有哪些優點呢？ 一、隨時隨地的訪問 隨時隨地的訪問功能針對的是大多數上

    html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

    als ie8 mil oct scrip locals bsp 框架 canvas 新特性： 1. 拖拽釋放(Drag and drop) API 2. 語義化更好的內容標簽（header,nav,footer,aside,article,section） 3. 音頻、視

    如何提高手機網站轉化率

    體驗 專題 不同的 免費電話 時代 大量 部分 網站建設 做的 隨著智能手機的普及，很多網站手機用戶的比例越來越高，如何提高手機端的轉化率就顯得至關重要。今天耐思尼克小編給大家談談企業如何提高手機網站的轉化率的一些常用途徑。 一、文章 1、排版：手機的文章排版建議

    建設一個新網站需要這六個步驟

    網頁制作 如何創建網站 無論是工作還是生活，做任何事情都需要做好一個規劃，新網頁制作也一樣需要做好規劃，而且規劃對於網站建設來說非常重要，只要做好了所有的準備工作，網頁制作才會事半功倍。如何創建網站，才可以幫助網站快速提升排名，並且產生更高的價值，還可以體現出網站建設的意義。那麽網站建設一般都有

    為什麽復制構造函數的參數需要加const和引用

    們的 數值 修改 mes cto pre ges 賦值運算符重載 log 為什麽復制構造函數的參數需要加const和引用 一.引言 1.0在解答這個問題之前，我們先跑個小程序，看下調用關系。 1 #include <iostream> 2 using na

    meta 詳解，html5 meta 標簽日常設置（轉）

    user 針對 html keywords desc obi 360瀏覽器 initial friendly <!DOCTYPE html> <!-- 使用 HTML5 doctype，不區分大小寫 --> <html lang="zh-cm