移動web頁面頭部書寫

字數2516 閱讀1128 評論0 喜歡30

HTTP 標題信息(http-equiv) 和頁面描述信息(name)javascript

http-equiv:
該枚舉的屬性定義，能夠改變服務器和用戶代理行爲的編譯。編譯的值取content 裏的內容。簡單來講便可以模擬 HTTP 協議響應頭。
最多見的大概屬於Content-Type了，設置編碼類型。如css

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

H5中能夠簡化爲html

<meta charset="utf-8">

http-equiv常見還有其它以下等（合理使用可增長 SEO 收錄）。前端

Content-Language : 設置網頁語言
Refresh : 指定時間刷新頁面
set-cookie : 設定頁面 cookie 過時時間 last-modified : 頁面最後生成時間 expires : 設置 cache 過時時間 cache-control : 設置文檔的緩存機制 ...

name:
該屬性定義了文檔級元數據的名稱。用於對應網頁內容，便於搜索引擎查找分類，如 keywords, description; 也可使用瀏覽器廠商自定義的 meta，如 viewport；html5

viewport可視區域的定義，如屏幕縮放等。java

告訴瀏覽器如何規範的渲染網頁。ios

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

這個meta標籤表示：強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽；若是想設置用戶能夠進行縮放 user-scalable=yes;可是手機瀏覽器（UC）上依然沒法縮放。web

width – // [pixel_value | device-width] viewport 的寬度，範圍從 200 到 10,000，默認爲 980 像素 height – // [pixel_value | device-height ] viewport 的高度，範圍從 223 到 10,000 initial-scale – // float_value，初始的縮放比例 （範圍從 > 0 到 10） minimum-scale – // float_value，容許用戶縮放到的最小比例 maximum-scale – // float_value，容許用戶縮放到的最大比例 user-scalable – // [yes | no] 用戶是否能夠手動縮放 target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 目標屏幕像素密度

format-detection對電話號碼的識別&&email對EMAIL識別sql

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

meta標籤表示：告訴設備忽略將頁面中的數字識別爲電話號碼chrome

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

容許合寫：

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

no-cache緩存控制

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

沒有這句話的話，WAP 瀏覽器將僅僅顯示緩存中的文檔的複本, 而不須要每次刷新都鏈接服務器。某些 WAP 瀏覽器不支持用 <meta/> 標籤來控制緩存, 但它們確實知道 HTTP 頭 "Cache-Control: no-cache" 的意思. 這種狀況下, 解決方案是在服務器端的 HTTP 響應中設置 HTTP 頭.

IOS私有屬性

apple-mobile-web-app-capable 啓用 webapp 模式, 會隱藏工具欄和菜單欄，和其它配合使用。

<meta content="yes」 name=" apple-mobile-web-app-capable" />

meta標籤是iphone設備中的safari私有meta標籤，它表示：容許全屏模式瀏覽；

apple-mobile-web-app-status-bar-style在webapp模式下，改變頂部狀態條的顏色。

<meta content="black" name=" apple-mobile-web-app-status-bar-style" />

meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式，default(白色，默認) | black(黑色) | black-translucent(半透明)

apple-touch-startup-image在 webapp 下，設置啓動時候的界面;

<link rel="apple-touch-startup-image" href="/startup.png" />

不支持 size 屬性，可使用 media query 來控制。iphone 和 touch 上，圖片大小必須是 230*480 px,只支持豎屏;

apple-touch-icon在webapp下，指定放置主屏幕上 icon 文件路徑;

<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

默認 iphone 大小爲 60px, ipad 爲 76px, retina 屏乘2；
如沒有一致尺寸的圖標，會優先選擇比推薦尺寸大，可是最接近推薦尺寸的圖標。
ios7之前系統默認會對圖標添加特效（圓角及高光），若是不但願系統添加特效，則能夠用apple-touch-icon-precomposed.png代替apple-touch-icon.png

其餘meta

<meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 針對手持設備優化，主要是針對一些老的不識別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">

窗口大小

Apple爲了解決移動版Safari的屏幕分辨率大小問題，專門定義了viewport虛擬窗口，它的主要做用是容許開發者建立一個虛擬的窗口，並自定義其窗口的大小縮放功能。

若是開發者沒有定義這個模擬窗口，移動版Safari的虛擬窗口默認大小980像素。如今，除了Safari的瀏覽器外，其餘瀏覽器也支持viewPort虛擬窗口。可是，不一樣的瀏覽器對viewport窗口的默認大小支持都不一致。

虛擬窗口（layout viewport）
移動瀏覽器默認狀況下把 viewport 設置爲一個比較寬的值（防止太窄而在可視區域中顯示錯亂）。該默認的 viewport 稱爲 layout viewport。
寬度可經過 Js 獲取(基本全部設備都支持)

document.documentElement.clientWidth document.documentElement.clientHeight

視覺窗口（visual viewport）
瀏覽器可視區域大小。可理解爲手機物理屏幕。
寬度可經過 Js 獲取(不支持Android2, Opera Mini, UC8)

window.innerWidth window.innerHeight

ideal viewport
由Peter-Paul Koch提出的一種概念，一個完美適配移動設備的 viewport。理想狀態是不須要用戶縮放和橫向滾動條就能正常查看，顯示的文字大小合適，不區分分辨率，屏幕密度等。

meta viewport
移動端默認使用的是 layout viewport ，而咱們想要達到相似 ideal viewport 的效果的話，能夠經過 meta 標籤來對 viewport 進行控制。

web開發須知

開發觸摸屏你須要觸摸事件，而且hover事件失效，使用tap事件替換click事件。
關於適配不一樣分辨率的屏幕，一般使用兩倍像素的圖片。
移動端設備對於Web Storage的支持狀況比較理想。

Touch觸控事件

touchstart 手指放在一個DOM元素上不放時出發事件
touchmove手指拖拽一個DOM元素時觸發事件
touchend手指從一個DOM元素中移開時觸發事件
除了上述的標準觸摸事件外，SenchaTouch還自定義了很是多的事件，分別以下：
touchdowm 手機觸摸屏幕時觸發事件
dragstart 拖拽DOM元素前觸發事件
drag拖拽DOM元素時觸發事件
dragend 拖拽DOM元素後觸發事件
singletap 和tap事件類型
tap 手指觸摸屏幕並迅速的離開屏幕
doubletap手指連續兩次放在DOM元素上後觸發事件
taphold觸摸並保持一段時間後觸發事件
tapcancle觸摸中斷事件
swipe滑動時觸發事件
pinch 手指按捏一個DOM元素時觸發事件
pinchstart 手指按捏一個DOM元素以前觸發事件
pinchend手指按捏一個DOM元素以後觸發事件

屏幕大小適配Css文件

<link rel='stylesheet' media='screen and(max-width:600px)' href='small.css'/>

在small.css樣式文件內，須要定義media類型的樣式，例如：

@media screen and (max-width:600px){ .demo{ background-color:#ccc; } }

當屏幕可視區域的寬度長度600px和900px之間時，應用該樣式文件。導入Css文件寫法以下：

<link rel='stylesheet' media='screen and(min-width:600px)and(max-width:900px)'href='small.css'></link>

small.css樣式文件內對應寫法以下：

@media screen and（min-width:600px）and(max-width:900px){ .demo{ …… } }

當文件最大屏幕但是去爲480像素時，應用該樣式文件。導入CSS文件寫法以下：

<link rel='stylesheet' media='screen and(max-device-width:480px)' href='small.css'></link>

small.css樣式文件內對應寫法以下：

@media screen and(max-device-width:480px){ .demo{ background-color:#ccc; } }

根據方向適配文件

<link rel='stylesheet' media ='all and(orientation:portrait)' href='portrait.css'/> <link rel='stylesheet' media='all and(orientation:landscape)' href='landscape.css'/>

媒體查詢語法

@media [media_query] media_type and media_feature

使用Media Queries樣式模塊時都必須‘@media’方式開頭。media_query表示查詢關鍵字，在這裏可使用not關鍵字和only關鍵字。not 關鍵字和only關鍵字。not關鍵字表示對後面的樣式表達式執行取反操做。

@media not screen and (max-device-width:480px)

only關鍵字的做用是，讓不支持MediaQueries 的設備但能讀取 Media Type 類型的瀏覽器忽略這個樣式。例如以下代碼：

@media only screen and (max-device-width:480px)

導入Media Queries 樣式文件,在首頁的HTML文件的head元素內新增如下Media Queries 樣式文件模塊；

<link rel='stylesheet' type='text/css' media='only screen and(max-width:480px),only screen and (max-device-width)' href='/resources/style/device.css'/>

移動設備對meta的定義

如下是meta每一個屬性詳解

尤爲要注意的是content裏多個屬性的設置必定要用分號+空格來隔開，若是不規範將不會起做用。

1、<meta http-equiv="Content-Type" content="text/html; charset=utf-8">   //編碼

META標籤是HTML語言HEAD區的一個輔助性標籤，它位於HTML文檔頭部的標記和標題 <<標記之間，它提供用戶不可見的信息。meta標籤一般用來爲搜索引擎robots定義頁面主題，或者是定義

用戶瀏覽器上的cookie；它能夠用於鑑別做者，設定頁面格式，標註內容提要和關鍵字；還能夠設置頁面使其能夠根據你定義的時間間隔刷新本身，以及設置RASC內容等級，等等。

詳細介紹

下面介紹一些有關標記的例子及解釋。

META標籤分兩大部分：HTTP標題信息（HTTP-EQUIV）和頁面描述信息（NAME）。

★HTTP-EQUIV

HTTP-EQUIV相似於HTTP的頭部協議，它迴應給瀏覽器一些有用的信息，以幫助正確和精確地顯示網頁內容。經常使用的HTTP-EQUIV類型有：

一、Content-Type和Content-Language （顯示字符集的設定）轉自環 球 網校edu24ol.com轉自環 球 網校edu24ol.com轉自環 球 網校edu24ol.com

說明：設定頁面使用的字符集，用以說明主頁製做所使用的文字已經語言，瀏覽器會根據此來調用相應的字符集顯示page內容。

<Meta http-equiv="Content-Type" Content="text/html; Charset=gb2312">
<Meta http-equiv="Content-Language" Content="zh-CN">

注意：　該META標籤訂義了HTML頁面所使用的字符集爲GB2132，就是國標漢字碼。若是將其中的「charset=GB2312」替換成「BIG5」，則該頁面所用的字符集就是繁體中文Big5碼。當你

瀏覽一些國外的站點時，IE瀏覽器會提示你要正確顯示該頁面須要下載xx語支持。這個功能就是經過讀取HTML頁面META標籤的Content-Type屬性而得知須要使用哪一種字符集顯示該頁面的。如

果系統裏沒有裝相應的字符集，則IE就提示下載。其餘的語言也對應不一樣的charset，好比日文的字符集是「iso-2022-jp 」，韓文的是「ks_c_5601」。

Content-Type的Content還能夠是：text/xml等文檔類型；

Charset選項：ISO-8859-1（英文）、BIG五、UTF-八、SHIFT-Jis、Euc、Koi8-二、us-ascii， x-mac-roman， iso-8859-2， x-mac-ce， iso-2022-jp， x-sjis， x-euc-jp，

euc-kr， iso-2022-kr， gb2312， gb_2312-80， x-euc-tw， x-cns11643-1，x-cns11643-2等字符集；Content-Language的Content還能夠是：EN、FR等語言代碼。

2、<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>//屏幕的縮放

1. viewport：

也就是可視區域。對於桌面瀏覽器，咱們都很清楚viewport是什麼，就是出去了全部工具欄、狀態欄、滾動條等等以後用於看網頁的區域，

這是真正有效的區域。因爲移動設備屏幕寬度不一樣於傳統web,所以咱們須要改變viewport;

實際上咱們能夠操做的屬性有4 個：

width -             //  viewport 的寬度 （範圍從200 到10,000，默認爲980 像素）
height -            //  viewport 的高度 （範圍從223 到10,000）

initial-scale -     //  初始的縮放比例 （範圍從>0 到10）

minimum-scale -    //   容許用戶縮放到的最小比例

maximum-scale -    //   容許用戶縮放到的最大比例

user-scalable -    //   用戶是否能夠手動縮 (no,yes)

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" >

第一個meta標籤表示：

強制讓文檔與設備的寬度保持1：1；

文檔最大的寬度比列是1.0（initial-scale初始刻度值和maximum-scale最大刻度值）；

user-scalable定義是否可縮放（0爲不縮放），使頁面固定設備上面的大小。

（注意：實際測試中發現，HTC G7自身系統瀏覽器不支持這一條規則，可以對頁面進行放大，一旦放大響應的box也隨之放大，致使俄頁面出現錯亂問題，解決方法：定義頁面的最小寬度min-width，body{min-width: 300px;}）

3、<meta name=」apple-mobile-web-app-capable」 content=」yes」 />  // 離線應用的另外一個技巧
<meta name=」apple-mobile-web-app-status-bar-style」 content=black」 />  // 隱藏狀態欄\

說明：網站開啓對web app程序的支持。

這裏要詳細的介紹一下ios設備對這兩個meta的功能做用（外界通稱該應用爲「離線app」，但從字面意思上面會有誤解，覺得只能脫離網絡，因此在這裏我仍是用web app描述。）：

該meta能夠看出內容爲「蘋果設備web 應用程序xx」，就是說該meta是專門定義web 應用的.

說明：

在web app應用下狀態條（屏幕頂部條）的顏色；

默認值爲default（白色），能夠定爲black（黑色）和black-translucent（灰色半透明）。

注意：

若值爲「black-translucent」將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕爲40px）。

糾正：以前查閱了一些資料，說apple-mobile-web-app-status-bar-style屬性爲隱藏狀態欄，其實這是一個誤解，在這裏爲你們糾正一下這個問題。

蘋果web app其餘設置：

固然，配合web app的icon 和啓動界面須要額外的兩端代碼進行設定，以下所示：

<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />

說明：這個link就是設置web app的放置主屏幕上icon文件路徑。

使用：

該路徑須要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。

圖片尺寸能夠設定爲57*57（px）或者Retina能夠定爲114*114（px），ipad尺寸爲72*72（px）

<link rel="apple-touch-startup-image" href="milanoo_startup.png" />

說明：

這個link就是設置啓動時候的界面，放置的路勁和上面相似。

使用：

該路徑須要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。

官方規定啓動界面的尺寸必須爲 320*640（px），本來覺得Retina屏幕能夠支持雙倍，可是不支持，圖片顯示不出來。

4、<meta content="black" name="apple-mobile-web-app-status-bar-style" /> //指定的iphone中safari頂端的狀態條的樣式
<meta content="telephone=no" name="format-detection" />  <meta content="email=no" name="format-detection" />//將不識別郵箱

告訴設備忽略將頁面中的數字識別爲電話號碼

使設備瀏覽網頁時對數字不啓用電話功能（不一樣設備解釋不一樣，itouch點擊數字爲存入聯繫人，iphone爲撥打電話），忽略將頁面中的數字識別爲電話號碼。

若須要啓用電話功能將telephone=yes便可，具體調用格式能夠這樣書寫代碼<a href=」13888888888″>Call Me</a>，若在頁面上面有google maps, iTunes和youtube的連接會在ios設備上打開相應的程序組件。

<meta name="Author" contect="Mr.He"/ > //做者姓名

移動前端開發中添加一些webkit專屬的HTML5頭部標籤，幫助瀏覽器更好解析html代碼，更好地將移動web前端頁面表現出來。本文整理一些經常使用的meta標籤。

<!DOCTYPE html> <!-- 使用 HTML5 doctype，不區分大小寫 -->
<html lang="zh-cmn-Hans"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->
<head>
    <!-- 聲明文檔使用的字符編碼 -->
    <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="author" content="name, email@gmail.com"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- 爲移動設備添加 viewport -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` 會致使 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->
 
    <!-- iOS 設備 begin -->
    <meta name="apple-mobile-web-app-title" content="標題">
    <!-- 添加到主屏後的標題（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 是否啓用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄 -->
 
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari） -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 設置蘋果工具欄顏色 -->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <!-- 忽略頁面中的數字識別爲電話，忽略email識別 -->
    <!-- 啓用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">
    <!-- windows phone 點擊無高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- iOS 圖標 begin -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
    <!-- iPhone 和 iTouch，默認 57x57 像素，必須有 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
    <!-- Retina iPhone 和 Retina iTouch，114x114 像素，能夠沒有，但推薦有 -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
    <!-- Retina iPad，144x144 像素，能夠沒有，但推薦有 -->
    <!-- iOS 圖標 end -->
 
    <!-- iOS 啓動畫面 begin -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
    <!-- iPad 豎屏 768 x 1004（標準分辨率） -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
    <!-- iPad 豎屏 1536x2008（Retina） -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
    <!-- iPad 橫屏 1024x748（標準分辨率） -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
    <!-- iPad 橫屏 2048x1496（Retina） -->
 
    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
    <!-- iPhone/iPod Touch 豎屏 320x480 (標準分辨率) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
    <!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
    <!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) -->
    <!-- iOS 啓動畫面 end -->
 
    <!-- iOS 設備 end -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 磁貼顏色 -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <!-- Windows 8 磁貼圖標 -->
 
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <!-- 添加 RSS 訂閱 -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    <!-- 添加 favicon icon -->

    <!-- 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 -->
 
    <title>標題</title>
</head>

移動前端頭部標籤(HTML5 head meta)轉載 移動設備對meta的定義