摘要：解決方案可以解決在手機上點擊事件的延遲的模塊，事件也是為了解決在的延遲問題顯示屏原理及設(shè)計方案說明屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由個變?yōu)槎鄠€，如在同樣帶下的屏幕上，蘋果設(shè)備的顯示屏中，像素點個變?yōu)閭€。

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("");
}

空白頁基本meta標(biāo)簽

其他meta標(biāo)簽

移動端如何定義字體font-family

@ --------------------------------------中文字體的英文名稱
@ 宋體      SimSun
@ 黑體      SimHei
@ 微信雅黑   Microsoft Yahei
@ 微軟正黑體 Microsoft JhengHei
@ 新宋體    NSimSun
@ 新細(xì)明體  MingLiU
@ 細(xì)明體    MingLiU
@ 標(biāo)楷體    DFKai-SB
@ 仿宋     FangSong
@ 楷體     KaiTi
@ 仿宋_GB2312  FangSong_GB2312
@ 楷體_GB2312  KaiTi_GB2312  
@
@ 說明：中文字體多數(shù)使用宋體、雅黑，英文用Helvetica

body { font-family: Microsoft Yahei,SimSun,Helvetica; } 

打電話發(fā)短信寫郵件怎么實現(xiàn)

// 一、打電話
打電話給:0755-10086

//  二、發(fā)短信，winphone系統(tǒng)無效
發(fā)短信給: 10086

// 三、寫郵件
//注：在添加這些功能時，第一個功能以"?"開頭，后面的以"&"開頭
//1.普通郵件
點擊我發(fā)郵件
//2.收件地址后添加?cc=開頭，可添加抄送地址（Android存在兼容問題）
點擊我發(fā)郵件
//3.跟著抄送地址后，寫上&bcc=,可添加密件抄送地址（Android存在兼容問題）
點擊我發(fā)郵件
//4.包含多個收件人、抄送、密件抄送人，用分號(;)隔開多個郵件人的地址
點擊我發(fā)郵件
//5.包含主題，用?subject=
點擊我發(fā)郵件
//6.包含內(nèi)容，用?body=;如內(nèi)容包含文本，使用%0A給文本換行 
點擊我發(fā)郵件
//7.內(nèi)容包含鏈接，含http(s)://等的文本自動轉(zhuǎn)化為鏈接
點擊我發(fā)郵件
//8.內(nèi)容包含圖片（PC不支持）
點擊我發(fā)郵件
//9.完整示例
點擊我發(fā)郵件

移動端touch事件（區(qū)分webkit和winphone）

/* 當(dāng)用戶手指放在移動設(shè)備在屏幕上滑動會觸發(fā)的touch事件 */
// 以下支持webkit
touchstart——當(dāng)手指觸碰屏幕時候發(fā)生。不管當(dāng)前有多少只手指
touchmove——當(dāng)手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面，會調(diào)用event的preventDefault()可以阻止默認(rèn)情況的發(fā)生：阻止頁面滾動
touchend——當(dāng)手指離開屏幕時觸發(fā)
touchcancel——系統(tǒng)停止跟蹤觸摸時候會觸發(fā)。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發(fā)該事件，這個事件比較少用

//TouchEvent說明：
touches：屏幕上所有手指的信息
targetTouches：手指在目標(biāo)區(qū)域的手指信息
changedTouches：最近一次觸發(fā)該事件的手指信息
touchend時，touches與targetTouches信息會被刪除，changedTouches保存的最后一次的信息，最好用于計算手指信息

//參數(shù)信息(changedTouches[0])
clientX、clientY在顯示區(qū)的坐標(biāo)
target：當(dāng)前元素

//事件響應(yīng)順序
ontouchstart  > ontouchmove  > ontouchend > onclick

// 以下支持winphone 8
MSPointerDown——當(dāng)手指觸碰屏幕時候發(fā)生。不管當(dāng)前有多少只手指
MSPointerMove——當(dāng)手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面，會調(diào)用css的html{-ms-touch-action: none;}可以阻止默認(rèn)情況的發(fā)生：阻止頁面滾動
MSPointerUp——當(dāng)手指離開屏幕時觸發(fā)

移動端click屏幕產(chǎn)生200-300ms的延時響應(yīng)

說明：移動設(shè)備上的web網(wǎng)頁是有300ms延遲的，玩玩會造成按鈕點擊延遲甚至是點擊失效。

以下是歷史原因，來源一個公司內(nèi)一個同事的分享：
2007年蘋果發(fā)布首款iphone上IOS系統(tǒng)搭載的safari為了將適用于PC端上大屏幕的網(wǎng)頁能比較好的展示在手機端上，使用了雙擊縮放(double tap to zoom)的方案，比如你在手機上用瀏覽器打開一個PC上的網(wǎng)頁，你可能在看到頁面內(nèi)容雖然可以撐滿整個屏幕，但是字體、圖片都很小看不清，此時可以快速雙擊屏幕上的某一部分，你就能看清該部分放大后的內(nèi)容，再次雙擊后能回到原始狀態(tài)。

雙擊縮放是指用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網(wǎng)頁縮放至原始比例。

原因就出在瀏覽器需要如何判斷快速點擊上，當(dāng)用戶在屏幕上單擊某一個元素時候，例如跳轉(zhuǎn)鏈接，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點擊鏈接還是要雙擊該部分區(qū)域進行縮放操作，所以，捕獲第一次單擊后，瀏覽器會先Hold一段時間t，如果在t時間區(qū)間里用戶未進行下一次點擊，則瀏覽器會做單擊跳轉(zhuǎn)鏈接的處理，如果t時間里用戶進行了第二次單擊操作，則瀏覽器會禁止跳轉(zhuǎn)，轉(zhuǎn)而進行對該部分區(qū)域頁面的縮放操作。那么這個時間區(qū)間t有多少呢？在IOS safari下，大概為300毫秒。這就是延遲的由來。造成的后果用戶純粹單擊頁面，頁面需要過一段時間才響應(yīng)，給用戶慢體驗感覺，對于web開發(fā)者來說是，頁面js捕獲click事件的回調(diào)函數(shù)處理，需要300ms后才生效，也就間接導(dǎo)致影響其他業(yè)務(wù)邏輯的處理。

//解決方案：
fastclick可以解決在手機上點擊事件的300ms延遲
zepto的touch模塊，tap事件也是為了解決在click的延遲問題

Rentina顯示屏原理及設(shè)計方案

說明：retina屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由1個變?yōu)槎鄠€，如在同樣帶下的屏幕上，蘋果設(shè)備的retina顯示屏中，像素點1個變?yōu)?個。
在高清顯示屏中的位圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設(shè)計為傳統(tǒng)PC的2倍。
那么，前端的應(yīng)對方案是：設(shè)計稿切出來的圖片長寬保證為偶數(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è)計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
}

chrome表單自動填充去掉input黃色背景解決方案

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
}

點擊元素產(chǎn)生背景或邊框怎么去掉

//ios用戶點擊一個鏈接，會出現(xiàn)一個半透明灰色遮罩, 如果想要禁用，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除灰色半透明遮罩；
//android用戶點擊一個鏈接，會出現(xiàn)一個邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來額效果不一樣，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果；
//winphone系統(tǒng),點擊標(biāo)簽產(chǎn)生的灰色半透明背景，能通過設(shè)置去掉；
//特殊說明：有些機型去除不了，如小米2。對于按鈕類還有個辦法，不使用a或者input標(biāo)簽，直接用div標(biāo)簽
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瀏覽器的默認(rèn)外觀
input,select { -webkit-appearance:none; appearance: none; }

//二、winphone下，使用偽元素改變表單元素默認(rèn)外觀
//1.禁用select默認(rèn)箭頭，::-ms-expand修改表單控件下拉箭頭，設(shè)置隱藏并使用背景圖片來修飾
select::-ms-expand { display:none; }

//2.禁用radio和checkbox默認(rèn)樣式，::-ms-check修改表單復(fù)選框或單選框默認(rèn)圖標(biāo)，設(shè)置隱藏并使用背景圖片來修飾
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { display:none; }

//3.禁用pc端表單輸入框默認(rèn)清除按鈕，::-ms-clear修改清除按鈕，設(shè)置隱藏并使用背景圖片來修飾
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { display:none; }

移動端字體單位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; }     

超實用的CSS樣式

//去掉webkit的滾動條——display: none;
//其他參數(shù)
::-webkit-scrollba //滾動條整體部分
::-webkit-scrollbar-thumb   //滾動條內(nèi)的小方塊
::-webkit-scrollbar-track   //滾動條軌道
::-webkit-scrollbar-button  //滾動條軌道兩端按鈕
::-webkit-scrollbar-track-piece  //滾動條中間部分，內(nèi)置軌道
::-webkit-scrollbar-corner       //邊角，兩個滾動條交匯處
::-webkit-resizer            //兩個滾動條的交匯處上用于通過拖動調(diào)整元素大小的小控件
//去除Firefox按鈕和錨標(biāo)簽上的虛線輪廓
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}
// 禁止長按鏈接與圖片彈出菜單
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的默認(rèn)觸摸事件
/*說明：winphone下默認(rèn)觸摸事件事件使用e.preventDefault是無效的，可通過樣式來禁用，如：*/
html { -ms-touch-action:none; } //禁止winphone默認(rèn)觸摸事件

取消input在ios下，輸入的時候英文首字母的默認(rèn)大寫

手機拍照和上傳圖片

//IOS有拍照、錄像、選取本地圖片功能，部分Android只有選擇本地圖片功能。Winphone不支持

屏幕旋轉(zhuǎn)的事件和樣式

//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處理
//豎屏?xí)r樣式
@media all and (orientation:portrait){   }
//橫屏?xí)r樣式
@media all and (orientation:landscape){   }

audio元素和video元素在ios和andriod中無法自動播放

//音頻，寫法一


//音頻，寫法二


//JS綁定自動播放（操作window時，播放音樂）
$(window).one("touchstart", function(){
    music.play();
})

//微信下兼容處理
document.addEventListener("WeixinJSBridgeReady", function () {
    music.play();
}, false);

//小結(jié)
//1.audio元素的autoplay屬性在IOS及Android上無法使用，在PC端正常
//2.audio元素沒有設(shè)置controls時，在IOS及Android會占據(jù)空間大小，而在PC端Chrome是不會占據(jù)任何空間

重力感應(yīng)事件

// 運用HTML5的deviceMotion，調(diào)用重力感應(yīng)事件
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

微信瀏覽器用戶調(diào)整字體大小后頁面矬了，怎么阻止用戶調(diào)整

//以下代碼可使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禁止用戶調(diào)整字體大小
body { -webkit-text-size-adjust:100%!important; }

//最好的解決方案：最好使用rem或百分比布局

定位的坑

//fixed定位
//1.ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
//2.android下fixed表現(xiàn)要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位
//3.ios4下不支持position:fixed
//解決方案：使用[Iscroll](http://cubiq.org/iscroll-5)，如：

        

               

               .....
        





//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"})
    })
}

播放視頻不全屏

JS判斷設(shè)備

function deviceType(){
    var ua = navigator.userAgent;
    var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];    
    for(var i=0; i0){         
            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%結(jié)束，0%的百分號不能去掉
//2.after和before偽類無法使用動畫animation
//3.border-radius不支持%單位，如要兼容，可以給radius設(shè)置一下較大的值
//4.translate百分比的寫法和scale在一起會導(dǎo)致失效，例如：
-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

android 4.x bug

//1.三星 Galaxy S4中自帶瀏覽器不支持border-radius縮寫
//2.同時設(shè)置border-radius和背景色的時候，背景色會溢出到圓角以外部分
//3.部分手機(如三星)，a鏈接支持鼠標(biāo):visited事件，也就是說鏈接訪問后文字變?yōu)樽仙?//4.android無法同時播放多音頻audio

消除transition閃屏

.css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

開啟硬件加速

//目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，當(dāng)檢測到某個DOM元素應(yīng)用了某些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圖片實現(xiàn)loading效果（降低CPU消耗，提升渲染性能）
//使用CSS3代碼代替JS動畫；
//開啟GPU加速；
//使用base64位編碼圖片(對小圖而言，大圖不建議使用)
    // 對于一些小圖標(biāo)，可以使用base64位編碼，以減少網(wǎng)絡(luò)請求。但不建議大圖使用，比較耗費CPU。小圖標(biāo)優(yōu)勢在于：
    //1.減少HTTP請求；
    //2.避免文件跨域；
    //3.修改及時生效；

zepto.js

官網(wǎng)
中文網(wǎng)
瀏覽器檢測
tap事件