《WEBAPP或html手機網站經驗摘要》要點：
本文介紹了WEBAPP或html手機網站經驗摘要，希望對您有用。如果有疑問，可以聯系我們。

相關主題：html5和webapp

手機網站的開發，通常要么使用自適應模板，要么單獨為手機開發一套模板。如果使用VEPHP框架，可以自動判斷訪問終端，從而調用不同的模板。有兩種情形，一種是您沒有設置移動端模板，那么VEPHP仍然使用PC端模板，這時通常用于自適應模板。如果您設置了移動端模板，則會自動調用移動端的。因此，使用VEPHP很好處理移動站。

在設計移動端的手機站或WEBAPP的模板時，掌握注意以下幾點能幫你很好設計出手機站：

1、手機網站的寬度：

手機站的圖片要做成600px-650px寬（取決于你的網站寬度上限），或使用740px寬，但這比較少，常見的騰訊等知名網站都是使用640px左右的寬度。并且，頁面設置成width:100%。必須在外圍容器如div加上：

    margin: 0 auto;

    max-width: 640px;

 
建議640，因為iphone4和5最低就是640px。如下：

注. iphone 各機型： 

2、允許網頁寬度自動調整：

首先，在網頁代碼的頭部，加入一行viewport元標簽。

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

這個有兩個作用：
A、讓網頁不會顯的很小。
B、不會在點擊表單元素后，在IOS上自動放大網頁（后面maximum-scale=1.0, user-scalable=0起作用）。

viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。

3、不使用絕對寬度：只能指定百分比寬度：width: xx%;

4、【重要】圖片要指定CSS：img{max-width: 100%;}

5、如果您的網頁所用框架沒有自動判斷功能，需要在前端頁面加入JS判斷瀏覽器是不是移動端，如是則跳轉到移動端，當然，如果是自適應頁，也不必跳轉。

6、對于IOS，防止在iOS設備中的Safari將數字識別為電話號碼：Safari總會把長串數字識別為電話號碼，文字變成藍色或綠色，點擊還會彈出菜單添加到通訊錄。safari有個私有meta屬性可以解決這個問題：
 <meta name="format-detection" content="telephone=no" /> 

7、如果一個PC端的網頁有對應的手機頁面，可以在PC端頁面加入meta http-equiv="mobile-agent"，如：

<meta name="mobile-agent" content="format=html5;url=http://www.fzlkiss.com/jiaocheng/1.html">

或者

<meta http-equiv="mobile-agent" content="format=html5;url=http://www.fzlkiss.com/jiaocheng/1.html">

建議前者。
這將有助于百度在移動搜索中將原PC頁結果替換為對應的手機頁結果。積極的參與“開放適配”，將有助于您的手機站在百度移動搜索獲得更好的展現，同時以更佳的瀏覽效果贏取用戶口碑。當然，如果您使用VEPHP框架，則不必設置此項。

Meta聲明的格式： <meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">

注：
A. 紅色字體部分是需要站點自定義的內容。[wml|xhtml|html5]——根據手機頁的協議語言，選擇中的一種。

url=url ——后者代表當前PC頁所對應的手機頁url，兩者必須是一一對應關系（而不是統一對應至手機站首頁）

B. name="mobile-agent"為更新后的meta聲明，建議使用。原有meta規則http-equiv="mobile-agent"能夠兼容并繼續生效，已標注過的無需修改。

8、還可以制作圖標，可以在iPhone/iPod Touch上將網頁"添加至主屏幕"時，去掉icon上那惡心的透明層,以知乎站為例：

<link rel="apple-touch-icon-precomposed" href="http://static.zhihu.com/static/img/ios/zhihu(57px).png" />
<link rel="apple-touch-icon-precomposed" href="http://static.zhihu.com/static/img/ios/zhihu(72px).png" sizes="72x72" />
<link rel="apple-touch-icon-precomposed" href="http://static.zhihu.com/static/img/ios/zhihu(76px).png" sizes="76x76" />
<link rel="apple-touch-icon-precomposed" href="http://static.zhihu.com/static/img/ios/zhihu(114px).png" sizes="114x114" />

<link rel="apple-touch-icon-precomposed" href="http://static.zhihu.com/static/img/ios/zhihu(120px).png" sizes="120x120" />

<link rel="apple-touch-icon-precomposed" href="http://static.zhihu.com/static/img/ios/zhihu(152px).png" sizes="152x152" />

9、其它常用META：

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

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

說明：

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

2、也是iphone的私有標簽，它指定的iphone中safari頂端的狀態條的樣式（以app模式啟動時才起作用，設置頂部系統欄的樣式，content有三個取值：default白色、black黑色、black-translucent灰色半透明。）：

注意：若值為“black-translucent”將會占據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）

10、預加載：

HTML5預加載標簽 

<!-- 頁面，可以使用絕對或者相對路徑 --> 

<link rel="prefetch" href="page2.html" /> 

<!-- 圖片，也可以是其他類型的文件 --> 

<link rel="prefetch" href="sprite.png" /> 

備注： https 協議也同樣支持。 

何時需要預加載？

網站是否采用預加載取決于你的需求，下面是一些建議： 

- 如果一系列的頁面幻燈片一樣展示，那么可以預加載前后各1至3個頁面. 

- 加載網站內部通用的圖片 

- 在搜索結果頁預加載下一頁 

轉載請注明本頁網址：
http://www.fzlkiss.com/jiaocheng/1.html