《WEBAPP或html手機網(wǎng)站經(jīng)驗摘要》要點：
本文介紹了WEBAPP或html手機網(wǎng)站經(jīng)驗摘要，希望對您有用。如果有疑問，可以聯(lián)系我們。

相關(guān)主題：html5和webapp

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

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

1、手機網(wǎng)站的寬度：

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

    margin: 0 auto;

    max-width: 640px;

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

注. iphone 各機型： 

2、允許網(wǎng)頁寬度自動調(diào)整：

首先，在網(wǎng)頁代碼的頭部，加入一行viewport元標(biāo)簽。

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

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

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

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

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

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

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

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

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

或者

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

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

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

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

url=url ——后者代表當(dāng)前PC頁所對應(yīng)的手機頁url，兩者必須是一一對應(yīng)關(guān)系（而不是統(tǒng)一對應(yīng)至手機站首頁）

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

8、還可以制作圖標(biāo)，可以在iPhone/iPod Touch上將網(wǎng)頁"添加至主屏幕"時，去掉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設(shè)備中的safari私有meta標(biāo)簽，它表示：允許全屏模式瀏覽；

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

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

10、預(yù)加載：

HTML5預(yù)加載標(biāo)簽 

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

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

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

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

備注： https 協(xié)議也同樣支持。 

何時需要預(yù)加載？

網(wǎng)站是否采用預(yù)加載取決于你的需求，下面是一些建議： 

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

- 加載網(wǎng)站內(nèi)部通用的圖片 

- 在搜索結(jié)果頁預(yù)加載下一頁 

轉(zhuǎn)載請注明本頁網(wǎng)址：
http://www.snjht.com/jiaocheng/1.html