H5中的 meta 標籤及 移動頁面單位

一、定義文檔關鍵詞，用於搜索引擎：（<= 874 個字符）

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

二、定義web頁面描述：

<meta name="description" content="Free Web tutorials on HTML and CSS">

三、定義頁面做者：

<meta name="author" content="Hege Refsnes">

四、每30秒刷新頁面：

<meta http-equiv="refresh" content="30">

五、規定 HTML 文檔的字符編碼：

<meta charset="UTF-8">

六、搜索引擎索引方式

<meta name="robots" content="index,follow" />
<!-- all：文件將被檢索，且頁面上的連接能夠被查詢； none：文件將不被檢索，且頁面上的連接不能夠被查詢； index：文件將被檢索； follow：頁面上的連接能夠被查詢； noindex：文件將不被檢索； nofollow：頁面上的連接不能夠被查詢。 -->

七、移動設備

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 會致使 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊 width：寬度（數值 / device-width）（範圍從200 到10,000，默認爲980 像素） height：高度（數值 / device-height）（範圍從223 到10,000） initial-scale：初始的縮放比例 （範圍從>0 到10） minimum-scale：容許用戶縮放到的最小比例 maximum-scale：容許用戶縮放到的最大比例 user-scalable：用戶是否能夠手動縮 (no,yes) -->

八、WebApp全屏模式：假裝app，離線應用。

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 啓用 WebApp 全屏模式 -->

九、忽略數字自動識別爲電話號碼

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

十、忽略識別郵箱

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

十一、針對手持設備優化，主要是針對一些老的不識別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">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">

十二、優先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 關於X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

1三、瀏覽器內核控制

 <meta name="renderer" content="webkit|ie-comp|ie-stand">
<!-- 國內雙核瀏覽器默認內核模式以下：
1. 搜狗高速瀏覽器、QQ瀏覽器：IE內核（兼容模式）
2. 360極速瀏覽器、遨遊瀏覽器：Webkit內核（極速模式） -->

1四、禁止瀏覽器從本地計算機的緩存中訪問頁面內容

<meta http-equiv="Pragma" content="no-cache">

1五、Windows 8

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁貼圖標 -->

1六、轉碼申明：用百度打開網頁可能會對其進行轉碼（好比貼廣告），避免轉碼可添加以下meta

<meta http-equiv="Cache-Control" content="no-siteapp" />

 經常使用的移動頁面單位

　　使用到的最多的單位就是px（像素）。像素屬於絕對度量單位；

　　一、百分比

　　二、em與rem

　　　　em：em指的是相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。換句話說，若是當前div的字體大小是12像素，那麼1em就是12像素，若是div字體大小是24像素，1em就是24像素。

　　　　rem：rem是相對於根元素的字體大小進行設置的，若是html元素中的字體大小設置爲24px，那麼針對任意html內的元素設置1rem，均表示的是24px，（另外，當rem可以和JS去配合時，可以很好的解決移動端的各類像素大小問題——JS獲取設備寬度，而後根據設備寬度調整html元素這個根元素的字體大小，在html元素中的全部元素，均使用rem相對度量單位）。

　　　　rem的支持程度：IE9及以上全部瀏覽器，安卓2.1以上版本，iOS4.0以及以上版本的safari（換句話說，IE6-8不兼容）

　　三、vw和vh

　　　　vw——viewpoint width，視窗寬度，1vw等於視窗寬度的1%；

　　　　vh——viewpoint height，視窗高度，1vh等於視窗高度的1%；

　　　　vw、vh是針對移動設備的，若是視窗大小發生變化，這兩個值也會跟着相應的變化。應該說，這兩種單位很是好用，在項目中，本身採用vw和vh以後，瞬間兼容全部設備，心情大好。可是，不是全部瀏覽器都支持。

移動端事件

　　1、tap 事件

　　　　Tap 和 click 二者都會在點擊時觸發，可是在手機WEB端，click會有 200~300 ms，因此請用tap代替click做爲點擊事件。

　　　　singleTap 和 doubleTap  分別表明單次點擊和雙次點擊。

　　二、touch事件

　　　　touch是針對觸屏手機上的觸摸事件。現今大多數觸屏手機webkit內核提供了touch事件的監聽，讓開發者能夠獲取用戶觸摸屏幕時的一些信息。其中包括：　　　　　　　　　　　　　　

　　　　touchstart、touchmove、touchend、touchcancel 這四個事件，這4個事件的觸發順序爲：touchstart  ->  touchmove-> …… -> touchcancel ->touchend