移動web頁面頭部書寫

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

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

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

H5中能夠簡化爲

<meta charset="utf-8">

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

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

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

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

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

<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）上依然沒法縮放。

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識別

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

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

<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'/>

 

 

轉自簡書的《 移動web頁面頭部書寫》