今天25學(xué)堂跟大家來普及下如何去制作一個很簡單的web APP頁面或者說是一個微信端頁面。然后也跟大家說一下移動端html5開發(fā)的一些常識和干貨分享。適合移動端的界面制作，優(yōu)化和兼容性調(diào)整工作的同學(xué)們來學(xué)習(xí)和回顧。

1、智能手機(jī)分辨率：（tips：這里顯示的都是網(wǎng)頁端的尺寸@1x的尺寸）

預(yù)設(shè)的分辨率有（可切換橫版，豎版）

普通智能手機(jī)：320×480   豎版

iPhone5：320×568  豎版

iphone6：375 ×667 豎版

普通平板：800×600

iPad2、3、mini：768×1024

寬屏電腦：1280×800

HDTV：1920×1080

另外，也可以自定義分辨率。

2、節(jié)省樣式的加載

目前而言，要改變網(wǎng)站的配色方案或者寫iPad專用的樣式表，是通過如下代碼：

@media only screen and (min-device-width:640px) { ... }//例如，適應(yīng)某設(shè)備的分辨率

其實(shí)，沒有必要這樣讓你的樣式表白白超載。可以通過下面這個方法去加載指定分辨率下的樣式。

<link rel="stylesheet" href="css.css" media="only screen and (min-device-width:640px)">

這樣的好處是，只有當(dāng)你的使用相應(yīng)的設(shè)備，才能加載到相應(yīng)的樣式表。

二、meta標(biāo)簽,即CSS媒體查詢

1) <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    //強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1，
    //文檔初始化縮放比例是1:1，
    //不允許用戶點(diǎn)擊屏幕放大瀏覽，
    //允許用戶縮放到的最大比例，
    //尤其要注意的是content里多個屬性的設(shè)置一定要用分號+空格來隔開，如果不規(guī)范將不會起作用。
其他屬性有：
width;
height; 
initial-scale; 
minimum-scale; 
maximum-scale; 
user-scalable; 

2) <meta name="apple-mobile-web-app-capable" content="yes" />
    //iPhone私有標(biāo)簽，它表示：允許全屏模式瀏覽

3) <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    //iPhone私有標(biāo)簽，它指定的iPhone中safari頂端的狀態(tài)條的樣式

4) <meta name="format-detection" content="telephone=no; email=no" />
    //不識別郵件和不把數(shù)字識別為電話號碼

二、CSS3  -webkit  相關(guān)的HTML5標(biāo)記元素的使用。

1、問題描述：移動端表單類有圓角、陰影，點(diǎn)擊鏈接時，有灰色底高亮等

1) 消除被點(diǎn)擊元素的外觀變化，所謂的點(diǎn)擊后高亮：
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

2) 阻止旋轉(zhuǎn)屏幕時自動調(diào)整字體大?。?webkit-text-size-adjust:none;

3) 解決字體在移動端比例縮小后出現(xiàn)鋸齒的問題：-webkit-font-smoothing: antialiased;

4) 盒子陰影：-webkit-box-shadow: none;

5) 圓角：-webkit-border-radius: 0;

6) appearance 屬性使元素看上去像標(biāo)準(zhǔn)的用戶界面元素，
    也可以取消默認(rèn)的樣式：-webkit-appearance: none;

7) 鼠標(biāo)可以懸停在內(nèi)容上（指向該內(nèi)容）而不激活它（單擊它）：-webkit-touch-action: manipulation;

三、使用自適應(yīng)模式布局
為了讓用戶在safari中正常的瀏覽網(wǎng)頁，我們必須保證用戶的設(shè)備處于任何一個方位時，safari都能夠正常的顯示網(wǎng)頁內(nèi)容（也就是自適應(yīng)），而且自適應(yīng)之后也不用考慮分辨率的問題。
比如：-webkit-box，流體盒模型，這是一種自適應(yīng)的解決方案。

四、javascript庫
更多的js庫可以點(diǎn)擊查看：webapp開發(fā)框架推薦以及優(yōu)缺點(diǎn)分析【webAPP干貨】

有很多設(shè)備的“devicePixelRatio”都大于1.5或者等于2（window.devicePixelRatio = 物理像素/dips）。 移動端web app上CSS要為Retian屏幕準(zhǔn)備另外的圖片及代碼：
方法一：

<script type="text/javascript" src="<路徑>/retina.js"></script>//使用方法
<style>
.logo {
  background-image: url('/images/my_image.png'); //通用屏幕
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) { //當(dāng)使用Retina屏幕時，讀取此段樣式
  .logo {
    background-image: url('/images/my_image@2x.png');
    background-size: 200px 100px; //限定大圖片的大小
  }
}
</style>

方法二：

<img src="/images/image.png" /> //通用屏幕
<img src="/images/my_image.png" data-at2x="<路徑>/image@2x.png" /> //retina屏幕

2. fastclick.js
說明：這個要重點(diǎn)介紹一下！
當(dāng)觸發(fā)"Click"事件時，移動端瀏覽器將等待約300毫秒的時間后再做出響應(yīng)，原因是瀏覽器要判斷用戶是否執(zhí)行雙擊。
導(dǎo)入 fastclick.js 即可減少這個時間差：

<script type='application/javascript' src='/path/to/fastclick.js'></script>

jQuery 使用方法：

$(function() {
    FastClick.attach(document.body);
});

五、App icon 制作

說明：所謂單機(jī)模式，其實(shí)就是通過把網(wǎng)站添加到主屏，由主屏進(jìn)入并訪問網(wǎng)站的一種方式。通常，app icon是自動截取網(wǎng)站的一部分截圖。這樣并不是很美觀，但也可以通過代碼來解決這個問題。
尺寸：在iPhone上的默認(rèn)大小是57px，在iPad上是72px。icon原始圖片建議尺寸為128px或者256，并且不建議自行添加光影效果，因?yàn)镺S自帶了。

<link rel="apple-touch-icon" href="/path/to/custom-icon.png">

// 若想去掉系統(tǒng)自帶的反光效果，可以增加“-precompsed”屬性。
<link rel="apple-touch-icon-precompsed" href="/path/to/custom-icon.png">

App Icon 設(shè)計資源：

圖標(biāo)模板：App Icon Template
設(shè)計靈感：iOS Icon Gallery，Hongkiat
制作工具：MakeAppIcon，iconkit（付費(fèi)軟件）
其他技巧

Float屬性替換

使用display：inline-block屬性代替；因?yàn)閒loat不適用于反向?？亢蜔o法接受水平間隙
檢測用戶是通過主屏啟動你的web app
從主屏啟動的web app和瀏覽器訪問web app最大的區(qū)別 是它清除了瀏覽器上方和下方的工具條，這樣web app就更加像是native app了。

window.navigation.standalone

if(!window.navigation.standalone) {
   ...// do your magic
}

此外，還可以通過以下方式，停留在單機(jī)模式中。

//最簡單的方法
 <a href="http://www.qmyo.com/" 
    onclick="window.location.href=this.href; return false">QmyO</a>

//改進(jìn)一下，寫成函數(shù)
function openLink(anchor) {
    window.location.href = anchor.href;
    return false;
}
//調(diào)用
<a href="http://www.QmyO.com/" onclick="return openLink(this)">QmyO</a>

//更廣泛的使用，如頁面導(dǎo)航
/* 創(chuàng)建一個全局點(diǎn)擊事件監(jiān)聽器 */
document.addEventListener("click", clickHandler, false);
function clickHandler(e) {
       var element = e.target;
       /* 只處理錨標(biāo)簽元素 <a> */
       if (element.localName.toUpperCase() != 'A') {
           return;
       }
       /* 忽略target屬性。*/
       if (!!element.getAttribute('target')) {
           return;
       }
       var url = element.href;
       /* 忽略不符合https正則規(guī)范以為的內(nèi)容并區(qū)分來源 */
       var match = url.match(/^https?://(.+?)/.*$/);
       if (!match || match[1] != window.location.host) {
              return;
       }
       /* 最后打開全屏幕視圖的鏈接，來防止默認(rèn)行為 */
       window.location.href = url;
       e.preventDefault();
}
//注意：當(dāng)a標(biāo)簽含有子標(biāo)簽如： <a href="pic.png"><img src="pic.png"></a>
  這個腳本就不起作用了，因?yàn)榻邮帐录牟皇擎溄樱莍mg標(biāo)簽。
  但其他情況下都能使用戶留在單機(jī)模式內(nèi)。當(dāng)點(diǎn)擊外部鏈接時，OS可能會跳至瀏覽器。

如何解決盒子邊框溢出 當(dāng)指定了一個塊級元素時，并且為其定義了邊框，設(shè)置了其寬度為100％。在移動設(shè)備開發(fā)過程中我們通常會對文本框定義為寬度100％，將其定義為塊級元 素以實(shí)現(xiàn)全屏自適應(yīng)的樣式，但此時，該元素的邊框(左右)各1個像素會溢了文檔，導(dǎo)致出現(xiàn)橫向滾動條，為解決這一問題，可以為其添加一個特殊的樣式：

-webkit-box-sizing:border-box;
//用來指定該盒子的大小包括邊框的寬度。

自動大寫與自動修正

關(guān)閉這兩項(xiàng)功能，可以通過autocapitalize 與autocorrect 這兩個選項(xiàng)

<input type="text" autocapitalize="off" autocorrect="off" />

橫板與豎版

方法一：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
// 肖像模式樣式       
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />
// 風(fēng)景模式樣式

方法二：

//肖像模式樣式
<style media="all and (orientation:portrait)" type="text/css">
   #landscape { display: none; }
</style>

//風(fēng)景模式樣式 
<style media="all and (orientation:landscape)" type="text/css">
   #portrait { display: none; }
</style>