摘要：通常我們再滑屏頁面，會調用的可以阻止默認情況的發生阻止頁面滾動當手指離開屏幕時觸發系統停止跟蹤觸摸時候會觸發。

1.添加到主屏后的標題（IOS）

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

3.百度禁止轉碼。通過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，非常之惡心。不過我們可以通過這個meta標簽來禁止它：

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

  
    default ：狀態欄背景是白色。
    black ：狀態欄背景是黑色。
    black-translucent ：狀態欄背景是半透明。 如果設置為 default 或 black ,網頁內容從狀態欄底部開始。 如果設置為 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。

5.開啟短信功能：

 123456

6.移動端郵箱識別（Android）
與電話號碼的識別一樣，在安卓上會對符合郵箱格式的字符串進行識別，我們可以通過如下的meta來管別郵箱的自動識別：

同樣地，我們也可以通過標簽屬性來開啟長按郵箱地址彈出郵件發送的功能：

dooyoe@gmail.com

viewport模板

    












這里開始內容

    

1.ios 系統

    默認中文字體是Heiti SC
    默認英文字體是Helvetica
    默認數字字體是HelveticaNeue
    無微軟雅黑字體        

2.android 系統

    默認中文字體是Droidsansfallback
    默認英文和數字字體是Droid Sans
    無微軟雅黑字體

3.winphone 系統

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

移動端字體單位font-size選擇px還是rem對于只需要適配手機設備，使用px即可對于需要適配各種移動設備，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設備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
    }
}    

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

移動端click屏幕產生200-300 ms的延遲響應移動設備上的web網頁是有300ms延遲的，玩玩會造成按鈕點擊延遲甚至是點擊失效。

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

ios系統中元素被觸摸時產生的半透明灰色遮罩怎么去掉ios用戶點擊一個鏈接，會出現一個半透明灰色遮罩, 如果想要禁用，可設置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最后一位設置為0就可以去除半透灰色遮罩

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

部分android系統中元素被點擊時產生的邊框怎么去掉android用戶點擊一個鏈接，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設置-webkit-tap-highlight-color的alpha值為0去除部分機器自帶效果

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

禁止文本縮放
當移動設備橫豎屏切換時，文本的大小會重新計算，進行相應的縮放，當我們不需要這種情況時，可以選擇禁止：

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

事件
window.orientation，取值：正負90表示橫屏模式、0和180表現為豎屏模式；

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

樣式
//豎屏時使用的樣式

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

//橫屏時使用的樣式

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

的accept 屬性

消除transition閃屏

.css{
    /*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/
    -webkit-transform-style: preserve-3d;
    /*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/
    -webkit-backface-visibility: hidden;
}

開啟硬件加速
解決頁面閃白
保證動畫流暢

  .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. 移動端基礎框架

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

2. 滑屏框架

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

3.瀑布流框架

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