摘要：通常我們?cè)倩另撁妫瑫?huì)調(diào)用的可以阻止默認(rèn)情況的發(fā)生阻止頁面滾動(dòng)當(dāng)手指離開屏幕時(shí)觸發(fā)系統(tǒng)停止跟蹤觸摸時(shí)候會(huì)觸發(fā)。

1.添加到主屏后的標(biāo)題（IOS）

2.啟用 WebApp 全屏模式（IOS）

3.百度禁止轉(zhuǎn)碼。通過百度手機(jī)打開網(wǎng)頁時(shí)，百度可能會(huì)對(duì)你的網(wǎng)頁進(jìn)行轉(zhuǎn)碼，往你頁面貼上它的廣告，非常之惡心。不過我們可以通過這個(gè)meta標(biāo)簽來禁止它：

4.設(shè)置狀態(tài)欄的背景顏色（IOS）設(shè)置狀態(tài)欄的背景顏色，只有在 "apple-mobile-web-app-capable" content="yes" 時(shí)生效

  
    default ：狀態(tài)欄背景是白色。
    black ：狀態(tài)欄背景是黑色。
    black-translucent ：狀態(tài)欄背景是半透明。 如果設(shè)置為 default 或 black ,網(wǎng)頁內(nèi)容從狀態(tài)欄底部開始。 如果設(shè)置為 black-translucent ,網(wǎng)頁內(nèi)容充滿整個(gè)屏幕，頂部會(huì)被狀態(tài)欄遮擋。

5.開啟短信功能：

 123456

6.移動(dòng)端郵箱識(shí)別（Android）
與電話號(hào)碼的識(shí)別一樣，在安卓上會(huì)對(duì)符合郵箱格式的字符串進(jìn)行識(shí)別，我們可以通過如下的meta來管別郵箱的自動(dòng)識(shí)別：

同樣地，我們也可以通過標(biāo)簽屬性來開啟長(zhǎng)按郵箱地址彈出郵件發(fā)送的功能：

[email protected]

viewport模板

    












這里開始內(nèi)容

    

1.ios 系統(tǒng)

    默認(rèn)中文字體是Heiti SC
    默認(rèn)英文字體是Helvetica
    默認(rèn)數(shù)字字體是HelveticaNeue
    無微軟雅黑字體        

2.android 系統(tǒng)

    默認(rèn)中文字體是Droidsansfallback
    默認(rèn)英文和數(shù)字字體是Droid Sans
    無微軟雅黑字體

3.winphone 系統(tǒng)

    默認(rèn)中文字體是Dengxian(方正等線體)
    默認(rèn)英文和數(shù)字字體是Segoe
    無微軟雅黑字體
    各個(gè)手機(jī)系統(tǒng)有自己的默認(rèn)字體，且都不支持微軟雅黑
    如無特殊需求，手機(jī)端無需定義中文字體，使用系統(tǒng)默認(rèn)
    英文字體和數(shù)字字體可使用 Helvetica ，三種系統(tǒng)都支持        

移動(dòng)端字體單位font-size選擇px還是rem對(duì)于只需要適配手機(jī)設(shè)備，使用px即可對(duì)于需要適配各種移動(dòng)設(shè)備，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備rem配置參考：

        html {font-size:10px}
@media screen and (min-width:480px) and (max-width:639px) {
    html {
        font-size: 15px
    }
}
@media screen and (min-width:640px) and (max-width:719px) {
    html {
        font-size: 20px
    }
}
@media screen and (min-width:720px) and (max-width:749px) {
    html {
        font-size: 22.5px
    }
}
@media screen and (min-width:750px) and (max-width:799px) {
    html {
        font-size: 23.5px
    }
}
@media screen and (min-width:800px) and (max-width:959px) {
    html {
        font-size: 25px
    }
}
@media screen and (min-width:960px) and (max-width:1079px) {
    html {
        font-size: 30px
    }
}
@media screen and (min-width:1080px) {
    html {
        font-size: 32px
    }
}    

    當(dāng)用戶手指放在移動(dòng)設(shè)備在屏幕上滑動(dòng)會(huì)觸發(fā)的touch事件
    以下支持webkit
    touchstart——當(dāng)手指觸碰屏幕時(shí)候發(fā)生。不管當(dāng)前有多少只手指
    touchmove——當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)觸發(fā)。通常我們?cè)倩另撁?，?huì)調(diào)用event的preventDefault()可以阻止默認(rèn)情況的發(fā)生：阻止頁面滾動(dòng)
    touchend——當(dāng)手指離開屏幕時(shí)觸發(fā)
    touchcancel——系統(tǒng)停止跟蹤觸摸時(shí)候會(huì)觸發(fā)。例如在觸摸過程中突然頁面alert()一個(gè)提示框，此時(shí)會(huì)觸發(fā)該事件，這個(gè)事件比較少用
    以下支持winphone 8
    MSPointerDown——當(dāng)手指觸碰屏幕時(shí)候發(fā)生。不管當(dāng)前有多少只手指
    MSPointerMove——當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)觸發(fā)。通常我們?cè)倩另撁?，?huì)調(diào)用css的html{-ms-touch-action: none;}可以阻止默認(rèn)情況的發(fā)生：阻止頁面滾動(dòng)
    MSPointerUp——當(dāng)手指離開屏幕時(shí)觸發(fā)

移動(dòng)端click屏幕產(chǎn)生200-300 ms的延遲響應(yīng)移動(dòng)設(shè)備上的web網(wǎng)頁是有300ms延遲的，玩玩會(huì)造成按鈕點(diǎn)擊延遲甚至是點(diǎn)擊失效。

    解決延遲方案：
    fastclick可以解決在手機(jī)上點(diǎn)擊事件的300ms延遲
    zepto的touch模塊，tap事件也是為了解決在click的延遲問題
    觸摸事件的響應(yīng)順序
    1、ontouchstart 
    2、ontouchmove 
    3、ontouchend 
    4、onclick
    解決300ms延遲的問題，也可以通過綁定ontouchstart事件，加快對(duì)事件的響應(yīng)

ios系統(tǒng)中元素被觸摸時(shí)產(chǎn)生的半透明灰色遮罩怎么去掉ios用戶點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)半透明灰色遮罩, 如果想要禁用，可設(shè)置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最后一位設(shè)置為0就可以去除半透灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0)}  

部分android系統(tǒng)中元素被點(diǎn)擊時(shí)產(chǎn)生的邊框怎么去掉android用戶點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來額效果不一樣，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶效果

a,button,input,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0)
    -webkit-user-modify:read-write-plaintext-only; 
} 

禁止文本縮放
當(dāng)移動(dòng)設(shè)備橫豎屏切換時(shí)，文本的大小會(huì)重新計(jì)算，進(jìn)行相應(yīng)的縮放，當(dāng)我們不需要這種情況時(shí)，可以選擇禁止：

html {
　　        -webkit-text-size-adjust: 100%;
}

事件
window.orientation，取值：正負(fù)90表示橫屏模式、0和180表現(xiàn)為豎屏模式；

window.onorientationchange = function(){
            switch(window.orientation){
                case -90:
                case 90:
                alert("橫屏:" + window.orientation);
                case 0:
                case 180:
                alert("豎屏:" + window.orientation);
                break;
            }
}

樣式
//豎屏?xí)r使用的樣式

@media all and (orientation:portrait) {
    .css{}
}

//橫屏?xí)r使用的樣式

@media all and (orientation:landscape) {
    .css{}
}

的accept 屬性

消除transition閃屏

.css{
    /*設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留 3D*/
    -webkit-transform-style: preserve-3d;
    /*（設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對(duì)用戶時(shí)是否可見：隱藏）*/
    -webkit-backface-visibility: hidden;
}

開啟硬件加速
解決頁面閃白
保證動(dòng)畫流暢

  .css {
     -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
  }    

1. 移動(dòng)端基礎(chǔ)框架

zepto.js 語法與jquery幾乎一樣，會(huì)jquery基本會(huì)zepto~
iscroll.js 解決頁面不支持彈性滾動(dòng)，不支持fixed引起的問題~ 實(shí)現(xiàn)下拉刷新，滑屏，縮放等功能~
underscore.js 該庫提供了一整套函數(shù)式編程的實(shí)用功能，但是沒有擴(kuò)展任何JavaScript內(nèi)置對(duì)象。
fastclick 加快移動(dòng)端點(diǎn)擊響應(yīng)時(shí)間
animate.css CSS3動(dòng)畫效果庫
Normalize.css Normalize.css是一種現(xiàn)代的、CSS reset為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案

2. 滑屏框架

適合上下滑屏、左右滑屏等滑屏切換頁面的效果
slip.js
iSlider.js
fullpage.js
swiper

3.瀑布流框架

masonry
工具推薦
caniuse 各瀏覽器支持html5屬性查詢
paletton 調(diào)色搭配