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

1.在meta中取消電話郵箱的識別。

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

2.據說是全屏，但是實際ios7.1無效果，查看了百度的大網站的web站點，都已經移除。

3.現在開始講我們要用到核心的東西。

3.1首先說的是

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

這是讓我們添加應用之后，在桌面打開圖標的時候可以全屏顯示，但是上面的頂部工具欄上會一塊黑色區域。如何解決？

3.2

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

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

3.3當然上面這些操作可能不是每個人都會去保存下來去做的，如果保存，請記得使用html5的緩沖技術，這個下次再扯，還有保存中用到的圖片呢？

<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會自己帶有一個陰影，所以請注意。 

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

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

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

minimal-ui 

還有，切記，不要分開content的內容，多個meta使用，會有點小問題，讀者自己可以測試。

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

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

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

今天我們講的是ios，當然聊點新的media query 技術，看招：

/*中分辨率屏幕*/ 
@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是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。 
公式表示就是：window.devicePixelRatio = 物理像素 / dips 

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

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

<!-- 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"> 

ok，東西講完了。