繼最近寫移動端H5項目不斷踩坑之后毒坛，決定找一些對自己后續(xù)開發(fā)有幫助的大總結博客來看看煎殷，但是個人很懶豪直，所以將瀏覽過的眾多博客中弓乙，認為較有價值的摘抄進來暇韧，以備后用懈玻。
老規(guī)矩涂乌，感謝原文作者，貼鏈接：H5項目常見問題匯總及解決方案
Meta基礎知識：
H5頁面窗口自動調整到設備寬度湿右，并禁止用戶縮放頁面
//一毅人、HTML頁面結構
// width 設置viewport寬度堰塌，為一個正整數场刑，或字符串‘device-width’
// height 設置viewport高度牵现，一般設置了寬度瞎疼，會自動解析出高度贼急，可以不用設置
// initial-scale 默認縮放比例太抓，為一個數字走敌，可以帶小數
// minimum-scale 允許用戶最小縮放比例掉丽，為一個數字捶障，可以帶小數
// maximum-scale 允許用戶最大縮放比例残邀，為一個數字芥挣，可以帶小數
// 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('');
}
空白頁基本meta標簽
其他meta標簽
常見問題：
移動端如何定義字體font-family
@ --------------------------------------中文字體的英文名稱
@ 宋體? ? ? SimSun
@ 黑體? ? ? SimHei
@ 微信雅黑? Microsoft Yahei
@ 微軟正黑體 Microsoft JhengHei
@ 新宋體? ? NSimSun
@ 新細明體? MingLiU
@ 細明體? ? MingLiU
@ 標楷體? ? DFKai-SB
@ 仿宋? ? FangSong
@ 楷體? ? KaiTi
@ 仿宋_GB2312? FangSong_GB2312
@ 楷體_GB2312? KaiTi_GB2312?
@@ 說明：中文字體多數使用宋體、雅黑坝咐，英文用Helvetica
body { font-family: Microsoft Yahei,SimSun,Helvetica; }
打電話發(fā)短信寫郵件怎么實現
// 一墨坚、打電話
//? 二泽篮、發(fā)短信帽撑，winphone系統無效
// 三亏拉、寫郵件
//注：在添加這些功能時及塘，第一個功能以"?"開頭磷蛹，后面的以"&"開頭
//1.普通郵件
//2.收件地址后添加?cc=開頭，可添加抄送地址（Android存在兼容問題）
//3.跟著抄送地址后檬嘀，寫上&bcc=,可添加密件抄送地址（Android存在兼容問題）
//4.包含多個收件人、抄送全陨、密件抄送人柿菩，用分號(;)隔開多個郵件人的地址
//5.包含主題枢舶，用?subject=
//6.包含內容凉泄，用?body=;如內容包含文本后众，使用%0A給文本換行
//7.內容包含鏈接吼具，含http(s)://等的文本自動轉化為鏈接
//8.內容包含圖片（PC不支持）
//9.完整示例
移動端touch事件（區(qū)分webkit和winphone）
/* 當用戶手指放在移動設備在屏幕上滑動會觸發(fā)的touch事件 */
// 以下支持webkit
touchstart——當手指觸碰屏幕時候發(fā)生拗盒。不管當前有多少只手指
touchmove——當手指在屏幕上滑動時連續(xù)觸發(fā)陡蝇。通常我們再滑屏頁面登夫，會調用event的preventDefault()可以阻止默認情況的發(fā)生：阻止頁面滾動
touchend——當手指離開屏幕時觸發(fā)
touchcancel——系統停止跟蹤觸摸時候會觸發(fā)。例如在觸摸過程中突然頁面alert()一個提示框涣楷，此時會觸發(fā)該事件抗碰，這個事件比較少用
//TouchEvent說明：
touches：屏幕上所有手指的信息
targetTouches：手指在目標區(qū)域的手指信息
changedTouches：最近一次觸發(fā)該事件的手指信息
touchend時弧蝇，touches與targetTouches信息會被刪除，changedTouches保存的最后一次的信息睦授，最好用于計算手指信息
//參數信息(changedTouches[0])
clientX睹逃、clientY在顯示區(qū)的坐標
target：當前元素
//事件響應順序
ontouchstart? > ontouchmove? > ontouchend > onclick
// 以下支持winphone 8
MSPointerDown——當手指觸碰屏幕時候發(fā)生。不管當前有多少只手指
MSPointerMove——當手指在屏幕上滑動時連續(xù)觸發(fā)疗隶。通常我們再滑屏頁面斑鼻，會調用css的html{-ms-touch-action: none;}可以阻止默認情況的發(fā)生：阻止頁面滾動
MSPointerUp——當手指離開屏幕時觸發(fā)
移動端click屏幕產生200-300ms的延時響應
說明：移動設備上的web網頁是有300ms延遲的蜀备，玩玩會造成按鈕點擊延遲甚至是點擊失效碾阁。
以下是歷史原因些楣，來源一個公司內一個同事的分享：
2007年蘋果發(fā)布首款iphone上IOS系統搭載的safari為了將適用于PC端上大屏幕的網頁能比較好的展示在手機端上蚕钦，使用了雙擊縮放(double tap to zoom)的方案鹅很，比如你在手機上用瀏覽器打開一個PC上的網頁邮屁，你可能在看到頁面內容雖然可以撐滿整個屏幕樱报，但是字體迹蛤、圖片都很小看不清盗飒，此時可以快速雙擊屏幕上的某一部分逆趣，你就能看清該部分放大后的內容宣渗，再次雙擊后能回到原始狀態(tài)痕囱。
雙擊縮放是指用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例傻粘。
原因就出在瀏覽器需要如何判斷快速點擊上弦悉，當用戶在屏幕上單擊某一個元素時候稽莉，例如跳轉鏈接，此處瀏覽器會先捕獲該次單擊缩膝，但瀏覽器不能決定用戶是單純要點擊鏈接還是要雙擊該部分區(qū)域進行縮放操作疾层，所以予弧，捕獲第一次單擊后掖蛤，瀏覽器會先Hold一段時間t蚓庭，如果在t時間區(qū)間里用戶未進行下一次點擊器赞，則瀏覽器會做單擊跳轉鏈接的處理港柜，如果t時間里用戶進行了第二次單擊操作爽锥，則瀏覽器會禁止跳轉救恨，轉而進行對該部分區(qū)域頁面的縮放操作。那么這個時間區(qū)間t有多少呢奢啥？在IOS safari下桩盲，大概為300毫秒赌结。這就是延遲的由來柬姚。造成的后果用戶純粹單擊頁面量承，頁面需要過一段時間才響應撕捍，給用戶慢體驗感覺忧风，對于web開發(fā)者來說是该窗，頁面js捕獲click事件的回調函數處理酗失，需要300ms后才生效，也就間接導致影響其他業(yè)務邏輯的處理昧绣。
//解決方案：
fastclick可以解決在手機上點擊事件的300ms延遲
zepto的touch模塊规肴，tap事件也是為了解決在click的延遲問題
Rentina顯示屏原理及設計方案
說明：retina屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由1個變?yōu)槎鄠€夜畴，如在同樣帶下的屏幕上拖刃，蘋果設備的retina顯示屏中，像素點1個變?yōu)?個贪绘。
在高清顯示屏中的位圖被放大兑牡，圖片會變得模糊，因此移動端的視覺稿通常會設計為傳統PC的2倍均函。
那么如迟，前端的應對方案是：設計稿切出來的圖片長寬保證為偶數玲销，并使用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設計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
}
點擊元素產生背景或邊框怎么去掉
/ios用戶點擊一個鏈接低千，會出現一個半透明灰色遮罩, 如果想要禁用，可設置-webkit-tap-highlight-color的alpha值為0去除灰色半透明遮罩；
//android用戶點擊一個鏈接，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設置-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果豺撑；
//winphone系統,點擊標簽產生的灰色半透明背景陆错，能通過設置去掉；
//特殊說明：有些機型去除不了已脓，如小米2已慢。對于按鈕類還有個辦法兢仰，不使用a或者input標簽请垛，直接用div標簽
a,button,input,textarea {
? ? -webkit-tap-highlight-color: rgba(0,0,0,0);
? ? -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有個副作用亚兄，就是輸入法不再能夠輸入多個字符
}?
// 也可以
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下
美化表單元素
//一饿自、使用appearance改變webkit瀏覽器的默認外觀
input,select { -webkit-appearance:none; appearance: none; }
//二跟磨、winphone下充尉，使用偽元素改變表單元素默認外觀
//1.禁用select默認箭頭热某，::-ms-expand修改表單控件下拉箭頭，設置隱藏并使用背景圖片來修飾
select::-ms-expand { display:none; }
//2.禁用radio和checkbox默認樣式，::-ms-check修改表單復選框或單選框默認圖標脓钾，設置隱藏并使用背景圖片來修飾
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { display:none; }
//3.禁用pc端表單輸入框默認清除按鈕，::-ms-clear修改清除按鈕昼牛，設置隱藏并使用背景圖片來修飾
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { display:none; }
移動端字體單位font-size選擇px還是rem
// 如需適配多種移動設備偎痛，建議使用rem疲迂。以下為參考值：
html { font-size: 62.5%; }? //10*16 = 62.5%
//設置12px字體? 這里注意在rem前要加上對應的px值爷耀，解決不支持rem的瀏覽器的兼容問題愧驱，做到優(yōu)雅降級
body { font-size:12px; font-size:1.2rem; }? ?
超實用的CSS樣式
//去掉webkit的滾動條——display: none;
//其他參數
::-webkit-scrollba //滾動條整體部分
::-webkit-scrollbar-thumb? //滾動條內的小方塊
::-webkit-scrollbar-track? //滾動條軌道
::-webkit-scrollbar-button? //滾動條軌道兩端按鈕
::-webkit-scrollbar-track-piece? //滾動條中間部分改化，內置軌道
::-webkit-scrollbar-corner? ? ? //邊角腥泥，兩個滾動條交匯處
::-webkit-resizer? ? ? ? ? ? //兩個滾動條的交匯處上用于通過拖動調整元素大小的小控件
// 禁止長按鏈接與圖片彈出菜單
a,img { -webkit-touch-callout: none }? ?
// 禁止ios和android用戶選中文字
html,body {-webkit-user-select:none; user-select: none; }
// 改變輸入框placeholder的顏色值
::-webkit-input-placeholder { /* WebKit browsers */
color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }
// android上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}
// 阻止windows Phone的默認觸摸事件
/*說明：winphone下默認觸摸事件事件使用e.preventDefault是無效的，可通過樣式來禁用孩等，如：*/
html { -ms-touch-action:none; } //禁止winphone默認觸摸事件
取消input在ios下翼闽，輸入的時候英文首字母的默認大寫
手機拍照和上傳圖片
//IOS有拍照书聚、錄像、選取本地圖片功能藻雌，部分Android只有選擇本地圖片功能雌续。Winphone不支持
屏幕旋轉的事件和樣式
//JS處理
function orientInit(){
? ? var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';
? ? if(orientChk =='lapdscape'){
? ? ? ? //這里是橫屏下需要執(zhí)行的事件
? ? }else{
? ? ? ? //這里是豎屏下需要執(zhí)行的事件
? ? }
}
orientInit();
window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){
? ? setTimeout(orientInit, 100);
},false)? ?
//CSS處理
//豎屏時樣式
@media all and (orientation:portrait){? }
//橫屏時樣式
@media all and (orientation:landscape){? }
audio元素和video元素在ios和andriod中無法自動播放
//音頻，寫法一
你的瀏覽器還不支持哦
//音頻胯杭，寫法二
? ? 優(yōu)先播放音樂bg.ogg驯杜，不支持在播放bg.mp3
//JS綁定自動播放（操作window時，播放音樂）
$(window).one('touchstart', function(){
? ? music.play();
})
//微信下兼容處理
document.addEventListener("WeixinJSBridgeReady", function () {
? ? music.play();
}, false);
//小結
//1.audio元素的autoplay屬性在IOS及Android上無法使用做个，在PC端正常
//2.audio元素沒有設置controls時艇肴，在IOS及Android會占據空間大小腔呜，而在PC端Chrome是不會占據任何空間
重力感應事件
// 運用HTML5的deviceMotion，調用重力感應事件
if(window.DeviceMotionEvent){
? ? document.addEventListener('devicemotion', deviceMotionHandler, false)
}?
var speed = 30;
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData){
? ? var acceleration = event.accelerationIncludingGravity;
? ? x = acceleration.x;
? ? y = acceleration.y;
? ? z = acceleration.z;
? ? if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){
? ? ? ? //這里是搖動后要執(zhí)行的方法
? ? ? ? yaoAfter();
? ? }
? ? lastX = x;
? ? lastY = y;
? ? lastZ = z;
}
function yaoAfter(){
? ? //do something
}
//說明：說見案例搖一搖效果中yao.js
微信瀏覽器用戶調整字體大小后頁面矬了再悼，怎么阻止用戶調整
//以下代碼可使Android機頁面不再受用戶字體縮放強制改變大小，但是會有1S左右延時膝但，期間可以考慮loading來處理
if (typeof(WeixinJSBridge) == "undefined") {
? ? document.addEventListener("WeixinJSBridgeReady", function (e) {
? ? ? ? setTimeout(function(){
? ? ? ? ? ? WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){
? ? ? ? ? ? ? ? alert(JSON.stringify(res));
? ? ? ? ? ? })
? ? ? ? }, 0)
? ? });
}else{?
? ? setTimeout(function(){
? ? ? ? WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){
? ? ? ? ? ? alert(JSON.stringify(res));
? ? ? ? })
? ? }, 0)?
}
//IOS下可使用 -webkit-text-size-adjust禁止用戶調整字體大小
body { -webkit-text-size-adjust:100%!important; }
//最好的解決方案：最好使用rem或百分比布局
定位的坑
//fixed定位
//1.ios下fixed元素容易定位出錯冲九，軟鍵盤彈出時，影響fixed元素定位
//2.android下fixed表現要比iOS更好跟束，軟鍵盤彈出時莺奸，不會影響fixed元素定位
//3.ios4下不支持position:fixed
//解決方案：使用[Iscroll](http://cubiq.org/iscroll-5)，如：
? ? ? ? ? ? ? .....
? ? var myscroll;
? ? function loaded(){
? ? ? ? myscroll=new iScroll("wrapper");
? ? }
? ? window.addEventListener("DOMContentLoaded",loaded,false);
//position定位
//Android下彈出軟鍵盤彈出時冀宴，影響absolute元素定位
//解決方案:
var ua = navigator.userAgent.indexOf('Android');
if(ua>-1){
? ? $('.ipt').on('focus', function(){
? ? ? ? $('.css').css({'visibility':'hidden'})
? ? }).on('blur', function(){
? ? ? ? $('.css').css({'visibility':'visible'})
? ? })
}
播放視頻不全屏
1.ios7+支持自動播放
2.支持Airplay的設備（如：音箱灭贷、Apple TV)播放
x-webkit-airplay="true"
3.播放視頻不全屏
webkit-playsinline="true"
-->
JS判斷設備
function deviceType(){
? ? var ua = navigator.userAgent;
? ? var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];? ?
? ? for(var i=0; i
? ? ? ? if(ua.indexOf(agent[i])>0){? ? ? ?
? ? ? ? ? ? break;
? ? ? ? }
? ? }
}
deviceType();
window.addEventListener('resize', function(){
? ? deviceType();
})
JS判斷微信瀏覽器
function isWeixin(){
? ? var ua = navigator.userAgent.toLowerCase();
? ? if(ua.match(/MicroMessenger/i)=='micromessenger'){
? ? ? ? return true;
? ? }else{
? ? ? ? return false;
? ? }
}
android 2.3 bug
//1.@-webkit-keyframes 需要以0%開始100%結束，0%的百分號不能去掉
//2.after和before偽類無法使用動畫animation
//3.border-radius不支持%單位略贮，如要兼容甚疟，可以給radius設置一下較大的值
//4.translate百分比的寫法和scale在一起會導致失效，例如：
-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)
android 4.x bug
//1.三星 Galaxy S4中自帶瀏覽器不支持border-radius縮寫
//2.同時設置border-radius和背景色的時候逃延，背景色會溢出到圓角以外部分
//3.部分手機(如三星)览妖，a鏈接支持鼠標:visited事件，也就是說鏈接訪問后文字變?yōu)樽仙?/p>
//4.android無法同時播放多音頻audio
消除transition閃屏
.css {
? ? -webkit-transform-style: preserve-3d;
? ? -webkit-backface-visibility: hidden;
? ? -webkit-perspective: 1000;
}
開啟硬件加速
//目前揽祥，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速讽膏，當檢測到某個DOM元素應用了某些CSS規(guī)則時就會自動開啟，從而解決頁面閃白拄丰，保證動畫流暢府树。
.css {
? ? -webkit-transform: translate3d(0,0,0);
? ? -moz-transform: translate3d(0,0,0);
? ? -ms-transform: translate3d(0,0,0);
? ? transform: translate3d(0,0,0);
}
渲染優(yōu)化
//1.禁止使用iframe（阻塞父文檔onload事件）
//2.禁止使用gif圖片實現loading效果（降低CPU消耗，提升渲染性能）
//使用CSS3代碼代替JS動畫料按；
//開啟GPU加速奄侠；
//使用base64位編碼圖片(不小圖而言，大圖不建議使用)
? ? // 對于一些小圖標站绪，可以使用base64位編碼遭铺，以減少網絡請求。但不建議大圖使用恢准，比較耗費CPU魂挂。小圖標優(yōu)勢在于：
? ? //1.減少HTTP請求；
? ? //2.避免文件跨域馁筐；
? ? //3.修改及時生效涂召；
常用的移動端框架
zepto.js
項目主頁：http://www.open-open.com/lib/view/home/1449325854077
擴展閱讀
H5、React Native敏沉、Native應用對比分析
iOS開發(fā)者必備：自己總結的iOS果正、mac開源項目及庫
為您推薦
用于轉換PDF炎码，TXT，HTML和圖片的實用PHP代碼片段
hackathon-starter - A boilerplate for Node.js web applications
實現Instagram的Material Design概念設計
更多
