此文章轉自我www.gbtags.com的文章。

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

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

1. <metaname="apple-touch-fullscreen"content="yes">

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

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

3.1首先說的是

1. <metaname="apple-mobile-web-app-capable"content
   ="yes">

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

3.2

1. <metaname="apple-mobile-web-app-status-bar-style"content="black-translucent">

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

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

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

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

1. apple-touch-icon-precomposed

 不是

1. apple-touch-icon

就是的ios7.0之前生成的icon會自己帶有一個陰影，所以請注意。 

3.4，那使用者第一次遊覽這個網頁（web app）中如何做的跟個native app類似呢？

1. <metaname
   ="viewport"content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">

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

1. minimal-ui

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

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

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

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

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

1. /*中解析度螢幕*/
2. @media(-webkit-min-device-pixl-ratio:1){
3. //css程式碼
4. }
5. /*高解析度螢幕*/
6. @media(-webkit-min-device-pixl-ratio:1.5){
7. //css程式碼
8. }
9. /*超高解析度螢幕（傳說中的Retina屏）*/
10. @media(-webkit-min-device-pixl-ratio:2){
11. //css程式碼
12. }

1. window.devicePixelRatio是裝置上物理畫素和裝置獨立畫素(device-independent pixels (dips))的比例。
2. 公式表示就是：window.devicePixelRatio =物理畫素/ dips

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

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

1. <!-- uc強制豎屏 -->
2. <metaname="screen-orientation"content="portrait">
3. <!-- QQ強制豎屏 -->
4. <metaname="x5-orientation"content="portrait">
5. <!-- UC強制全屏 -->
6. <metaname="full-screen"content="yes">
7. <!-- QQ強制全屏 -->
8. <metaname="x5-fullscreen"content="true">
9. <!-- UC應用模式 -->
10. <metaname="browsermode"content="application">
11. <!-- QQ應用模式 -->
12. <metaname="x5-page-mode"content="app">

ok，東西講完了，附上已經修改好的樣式的專案地址（請git下來，如果興趣修改好了想push跟博主要shh祕鑰）：

1. https://code.csdn.net/qazwsx2345/node_activity