十多年前web叩響了互聯(lián)網(wǎng)時代的大門，十年后的今天果元，移動互聯(lián)網(wǎng)的戰(zhàn)幕率先由原生應(yīng)用(Native app)拉開促王，移動web應(yīng)用則后來居上。二者之間做何取舍而晒，成為了廣大產(chǎn)品決策者蝇狼、開發(fā)者和學(xué)習(xí)者們爭執(zhí)不下的問題。
html語言是整個Web的基石倡怎，是一種標(biāo)記的語言迅耘。對于html本身而言贱枣，其實(shí)并沒有任何可以顯示的東西，他只是承載了抽象意義上的一段信息颤专，這段信息如何顯示纽哥，由誰顯示對html本身來說并不重要。而解讀html的具體客體栖秕，通常被稱為用戶代理(UserAgent),即我們所說的瀏覽器春塌。
html5為日益豐富的信息提供更簡單更強(qiáng)大的描述能力，是html的升級版簇捍，使html文檔所承載的信息更容易被所有人訪問只壳，更像是為移動設(shè)備而生的技術(shù)。
web開發(fā)在過去有非常多的局限暑塑，尤其是安全和設(shè)備訪問相關(guān)的部分吼句。相比于傳統(tǒng)的桌面web開發(fā)，基于html5可以方便地構(gòu)建類似傳統(tǒng)客戶端軟件的網(wǎng)頁App梯投，可以訪問磁盤系統(tǒng)和攝像頭等敏感設(shè)備命辖，輕松將桌面軟件擅長的領(lǐng)域帶入web的世界。對于當(dāng)前的主流移動設(shè)備而言分蓖，定位尔艇、觸摸和傳感器是其重要特點(diǎn)，而html5在這些方面也有鼎力的支持么鹤。
一下總結(jié)出一些html5在移動端瀏覽器可能遇到的問題终娃，供參考。
1.
iOS Safari 委托在document的事件失效
Safari 對click事件定義只能冒泡到body下面的子節(jié)點(diǎn)蒸甜，所以委托在document上得click事件不會被觸發(fā)棠耕！
解決方法為body得子節(jié)點(diǎn)添加click事件既可以解決。
$("body").children().click(function () {});
2.
iOS Safari 雙擊后事件失效bug
bug 出現(xiàn)在彈出層雙擊空白區(qū)域后柠新，瀏覽器scroll下移一部分窍荧，頁面點(diǎn)擊事件失效。
解決方法：彈出層禁止touchstart恨憎；
3.
Android手機(jī)$(window).width() Bug
部門安卓手機(jī)通過Zepto.js提供得 $(window).width(); $(window).height()獲取瀏覽器視圖寬度與實(shí)際寬度不一致蕊退。
解決方法：通過document.documentElement.clientWidth 獲取寬度。
var pageWidth = document.documentElement.clientWidth;
var pageHeight = document.documentElement.clientHeight;
4.
關(guān)閉iOS鍵盤首字母自動大寫
在iOS中憔恳，默認(rèn)情況下鍵盤是開啟首字母大寫的功能的瓤荔，如果啟用這個功能，可以這樣：
5.
手機(jī)拍照和上傳圖片
ios 有拍照钥组、錄像输硝、選取本地圖片功能
部分android只有選取本地圖片功能
6.
webview中viewport固定寬度全屏顯示方法
由于一些移動端游戲或互動形式 布局（元素）需要固定大小，又需要自適應(yīng)屏幕程梦，
可以通過設(shè)置視口寬度等于固定值讓瀏覽器自動縮放頁面的方法來實(shí)現(xiàn)
其中的width=640就是網(wǎng)頁內(nèi)容區(qū)的寬度点把，需要在不同手機(jī)上剛好全屏顯示橘荠，target-densitydpi=device-dpi設(shè)置后，css中的1px就會等于物理像素中的1px愉粤。
補(bǔ)充：由于safari瀏覽器不支持 target-densitydpi = device-dpi砾医，所以加入JS代碼自動調(diào)整縮放比例，調(diào)整后的代碼：
if(screen.width < 640) {
document.getElementById('WebViewport').setAttribute('content', 'width=640,initial-scale=' + screen.width / 640 + ',target-densitydpi=device-dpi,minimum-scale=0.1,maximum-scale=1,user-scalable=no');
}
6.1
Meta基礎(chǔ)知識：
H5頁面窗口自動調(diào)整到設(shè)備寬度衣厘，并禁止用戶縮放頁面
//一如蚜、HTML頁面結(jié)構(gòu)
// width ? ?設(shè)置viewport寬度，為一個正整數(shù)影暴，或字符串‘device-width’
// height ? 設(shè)置viewport高度，一般設(shè)置了寬度型宙，會自動解析出高度撬呢，可以不用設(shè)置
// initial-scale ? ?默認(rèn)縮放比例妆兑，為一個數(shù)字，可以帶小數(shù)
// minimum-scale ? ?允許用戶最小縮放比例搁嗓，為一個數(shù)字，可以帶小數(shù)
// maximum-scale ? ?允許用戶最大縮放比例腺逛，為一個數(shù)字荷愕，可以帶小數(shù)
// user-scalable ? ?是否允許手動縮放
//二、JS動態(tài)判斷
var phoneWidth = ?parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
document.write('');
}else{
document.write('');
}
} else {
document.write('');
}
6.2
6.3
其他meta標(biāo)簽
7.關(guān)于Rentina
Rentina顯示屏原理及設(shè)計(jì)方案
說明：retina屏是一種具備超高像素密度的液晶屏棍矛，同樣大小的屏幕上顯示的像素點(diǎn)由1個變?yōu)槎鄠€安疗，如在同樣帶下的屏幕上，蘋果設(shè)備的retina顯示屏中够委，像素點(diǎn)1個變?yōu)?個荐类。
在高清顯示屏中的位圖被放大，圖片會變得模糊茁帽，因此移動端的視覺稿通常會設(shè)計(jì)為傳統(tǒng)PC的2倍掉冶。
那么，前端的應(yīng)對方案是：設(shè)計(jì)稿切出來的圖片長寬保證為偶數(shù)脐雪，并使用backgroud-size把圖片縮小為原來的1/2
//例如圖片寬高為：200px*200px，那么寫法如下
.css{width:100px;height:100px;background-size:100px 100px;}
//其它元素的取值為原來的1/2恢共，例如視覺稿40px的字體战秋，使用樣式的寫法為20px
.css{font-size:20px}
//image-set設(shè)計(jì)Rentina背景圖
image-set,webkit私有屬性，也是CSS4的屬性讨韭，為解決Rentina屏幕下的圖像而生脂信。
.css {
background: url(images/bg.jpg) no-repeat center;
background: -webkit-image-set(
url(images/bg.jpg) 1x, ? ? //支持image-set普通屏
url(images/bg-2x.jpg) 2x); //支持image-set的Rentinan
}
移動端字體單位font-size選擇px還是rem
// 如需適配多種移動設(shè)備癣蟋，建議使用rem。以下為參考值：
html { font-size: 62.5%; } ? //10*16 = 62.5%
//設(shè)置12px字體 ? 這里注意在rem前要加上對應(yīng)的px值狰闪，解決不支持rem的瀏覽器的兼容問題疯搅，做到優(yōu)雅降級
body { font-size:12px; font-size:1.2rem; }
其他問題:
jQuery ajax在微信內(nèi)置瀏覽器中，初始配置before埋泵、behind不好用.
