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

1.在meta中取消電話郵箱的識(shí)別。

<meta name="apple-touch-fullscreen" content="yes">  

2.據(jù)說是全屏，但是實(shí)際ios7.1無效果，查看了百度的大網(wǎng)站的web站點(diǎn)，都已經(jīng)移除。

3.現(xiàn)在開始講我們要用到核心的東西。

3.1首先說的是

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

這是讓我們添加應(yīng)用之后，在桌面打開圖標(biāo)的時(shí)候可以全屏顯示，但是上面的頂部工具欄上會(huì)一塊黑色區(qū)域。如何解決？

3.2

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

black-translucent的作用是頂部工具欄，背景透明，字體顏色為白色，當(dāng)讓也有black和white選項(xiàng)，百度是設(shè)置為white，我測試中會(huì)發(fā)現(xiàn)其頂部還是一塊黑色，和難看，我測試的版本是iPhone ios7.1版本。

3.3當(dāng)然上面這些操作可能不是每個(gè)人都會(huì)去保存下來去做的，如果保存，請(qǐng)記得使用html5的緩沖技術(shù)，這個(gè)下次再扯，還有保存中用到的圖片呢？

<link rel="apple-touch-icon-precomposed" href="http://wap.baidu.com/static/img/webapp/img/icon_114.png"> 

如果你想做的更加適配性大，可以添加size=“114*114”這樣，這里大家要注意我用的是

apple-touch-icon-precomposed 

不是

apple-touch-icon 

就是的ios7.0之前生成的icon會(huì)自己帶有一個(gè)陰影，所以請(qǐng)注意。 

3.4，那用戶***次游覽這個(gè)網(wǎng)頁（web app）中如何做的跟個(gè)native app類似呢？

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"> 

前面部分是對(duì)屏幕大小的控制，最主要的是后面

minimal-ui 

還有，切記，不要分開content的內(nèi)容，多個(gè)meta使用，會(huì)有點(diǎn)小問題，讀者自己可以測試。

4.接下來我們聊得是media query技術(shù)，很多同學(xué)做適配的使用用到比如

<link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:960px)" href="style.css" /> 

對(duì)于這個(gè)，我覺得可以看下bootstrap和appcan等做他們的解決方案，做的很成熟了。 

今天我們講的是ios，當(dāng)然聊點(diǎn)新的media query 技術(shù)，看招：

/*中分辨率屏幕*/ 
@media (-webkit-min-device-pixl-ratio: 1){ 
//css代碼 
} 
  
/*高分辨率屏幕*/ 
@media (-webkit-min-device-pixl-ratio: 1.5){ 
//css代碼 
} 
  
/*超高分辨率屏幕（傳說中的Retina屏）*/ 
@media (-webkit-min-device-pixl-ratio: 2){ 
//css代碼 
} 

window.devicePixelRatio是設(shè)備上物理像素和設(shè)備獨(dú)立像素(device-independent pixels (dips))的比例。 
公式表示就是：window.devicePixelRatio = 物理像素 / dips 

舉個(gè)例子iphone4/4s，他的寬度是320，但是他的分辨率中的寬已經(jīng)是640，所以是 @media (-webkit-min-device-pixl-ratio: 2)

5.接下來是個(gè)題外話，個(gè)人看到別人寫的，沒有測試。

<!-- uc強(qiáng)制豎屏 --> 
<meta name="screen-orientation" content="portrait"> 
<!-- QQ強(qiáng)制豎屏 --> 
<meta name="x5-orientation" content="portrait"> 
<!-- UC強(qiáng)制全屏 --> 
<meta name="full-screen" content="yes"> 
<!-- QQ強(qiáng)制全屏 --> 
<meta name="x5-fullscreen" content="true"> 
<!-- UC應(yīng)用模式 --> 
<meta name="browsermode" content="application"> 
<!-- QQ應(yīng)用模式 --> 
<meta name="x5-page-mode" content="app"> 

ok，東西講完了。