移動端一些問題

移動端rem參考配置

        html{font-size:10px}
        @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
        @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
        @media screen and (min-width:415px) 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){html{font-size:25px}}
自動調整設備寬度

        <!-- H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面 -->
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
連接點擊時有邊框

        /* android、IOS 點擊一個連接時 **會出現一個邊框** 或者半透明灰色遮罩 */
        a,button,input,textarea {
        -webkit-tap-highlight-color: rgba(0,0,0,0;)
        -webkit-user-modify:read-write-plaintext-only;
        }
不自動識別電話或email。

        <!-- 忽略識別號碼 -->
        <meta name="format-detection" content="telephone=no">
        <!-- 忽略識別email -->
        <meta content="email=no" name="format-detection">
移動端200-300ms的延遲響應

        <!-- 1. fastclick能夠解決在手機上點擊事件的300ms延遲 -->
        <!-- 2. zepto的touch模塊，tap事件也是爲了解決在click的延遲問題 -->
拉動滾動條時延遲或卡頓

        
         body {
            -webkit-overflow-scrolling: touch;
                    overflow-scrolling: touch;
}
禁止複製或選中文本

        Element {
              -webkit-user-select: none;
              -moz-user-select: none;
              -khtml-user-select: none;
               user-select: none;
}
長時間按住頁面出現閃退

        element { -webkit-touch-callout: none; }
輸入框默認內陰影

        
        element{ -webkit-appearance: none; }
某些安卓手機圓角失效

        element{ background-clip: padding-box; }
頂部狀態欄背景色

        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <!-- 注意：除非你先使用apple-mobile-web-app-capable指定全屏模式不然這個meta標籤不會起任何做用。 -->
設置緩存

        <meta http-equiv="Cache-Control" content="no-cache" />
        <!-- 手機頁面一般在第一次加載後會進行緩存而後每次刷新會使用緩存而不是去從新向服務器發送請求。 -->
        <!-- 若是不但願使用緩存能夠設置no-cache。 -->
旋轉時字體大小調整

        
        html, body, p, div {
            -webkit-text-size-adjust:100%;
}
按鈕樣式被默認樣式覆蓋

        
            input,
            textarea {
              border: 0;
              -webkit-appearance: none;
            }
默認首字母大寫

        <!-- IOS鍵盤字母輸入，默認首字母大寫 -->
        <input type="text" autocapitalize="off" />
行高沒法垂直居中的問題

        
    html{-webkit-text-size-adjust:none;}
     
改變placeholder的字體顏色

        input::-webkit-input-placeholder{color:#AAAAAA;}
        input:focus::-webkit-input-placeholder{color:#EEEEEE;}
禁止長按觸發系統菜單

        
        .css
                {-webkit-touch-callout: none}
下拉選擇設右對齊

        
            select option {
                direction: rtl;
            }
出現一個六分之一空格

        
        
        this.value = this.value.replace(/\u2006/g, '');
動畫定義3D硬件加速

        
        element {
              -webkit-transform:translate3d(0, 0, 0)
              transform: translate3d(0, 0, 0);
}
                
Retina屏的1px邊框

        element{
            border-width: thin;
}
transition閃屏

        

        {
        -webkit-transform-style: preserve-3d;

        
        -webkit-backface-visibility:hidden;}
不支持 placeholder 問題

        <!-- 移動端 HTML5 input date 不支持 placeholder 問題 -->
        <input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">
瀏覽器私有及其它meta

        QQ瀏覽器私有
            <!-- 全屏模式 -->
            <meta name="x5-fullscreen" content="true">
            <!-- 強制豎屏 -->
            <meta name="x5-orientation" content="portrait">
            <!-- 強制橫屏 -->
            <meta name="x5-orientation" content="landscape">
            <!-- 應用模式 -->
            <meta name="x5-page-mode" content="app">
        UC瀏覽器私有
            <!-- 全屏模式 -->
            <meta name="full-screen" content="yes">
            <!-- 強制豎屏 -->
            <meta name="screen-orientation" content="portrait">
            <!-- 強制橫屏 -->
            <meta name="screen-orientation" content="landscape">
            <!-- 應用模式 -->
            <meta name="browsermode" content="application">
IOS中關於鍵盤事件

        <!--
        業務需求：
        當用input search作模糊搜索的時候，
        在鍵盤裏面輸入關鍵詞，會經過ajax後臺查詢，而後返回數據，
        而後再對返回的數據進行關鍵詞標紅。
        -->
        <!--
        問題緣由：
        用input監聽鍵盤keyup事件，在安卓手機瀏覽器中是能夠的，
        可是在ios手機瀏覽器中變紅很慢，用輸入法輸入以後，
        並未馬上相應keyup事件，只有在經過刪除以後才能相應！
         -->
        <!--
        解決辦法：
        能夠用html5的oninput事件去代替keyup
         -->
        <input type="text" id="testInput">
        <script type="text/javascript">
          document.getElementById('testInput').addEventListener('input', function(e){
            var value = e.target.value;
          });
        </script>
        <!-- 而後就達到相似 keyup 的效果！ -->
圖片加載慢怎麼辦

        <!-- 對這種狀況，手機開發通常用canvas方法加載： -->
        <!-- 具體的canvas API 參見：http://javascript.ruanyifeng.com/htmlapi/canvas.html -->
喚起select的option展開

            
            $(sltElement).trrgger("mousedown");
            
            function showDropdown(sltElement) {
              var event;
              event = document.createEvent('MouseEvents');
              event.initMouseEvent('mousedown', true, true, window);
              sltElement.dispatchEvent(event);
            };
判斷手機的類型

        var user="";
        if (/android/i.test(navigator.userAgent)){
        //  android
        user="1";
        }
        if (/ipad|iphone|mac/i.test(navigator.userAgent)){
        //  ios
        user="0";
        }
判斷是否來自微信瀏覽器

            function isFromWeiXin() {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
            return true;
            }
            return false;
            }
屏幕旋轉的事件

        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
                {}
        }
video沒法自動播放

            
            $('html').one('touchstart',function(){
            audio.play()
            })
解決播放視頻不全屏

        <!--
        如何解決播放視頻不全屏？
        1.ios7+支持自動播放
        2.支持Airplay的設備（如：音箱、Apple TV)播放
        x-webkit-airplay="true"
        3.播放視頻不全屏
        webkit-playsinline="true"
        -->
        <video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>
手機拍照和上傳圖片

        <!-- 選擇照片 -->
        <input type=file accept="image/*">
        <!-- 選擇視頻 -->
        <input type=file accept="video/*">
輸入時首字母默認大寫

        <!-- 取消input在ios下，輸入的時候英文首字母的默認大寫 -->
        <input autocapitalize="off" autocorrect="off" />
上去掉語音輸入按鈕

        
        input::-webkit-input-speech-button {display: none}
關於 position:fixed 致使的bug

    - ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
    - android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位
    - ios4下不支持position:fixed
        * 可用isroll.js，暫無完美方案
        參考連接：
        https://github.com/maxzhang/maxzhang.github.com/issues/2
        http://www.cnblogs.com/PeunZhang/archive/2013/06/14/3117589.html
移動頁面二維碼ios有的時候不識別
給寫個盒子 隱藏個二維碼，裏面再放個二維碼 居中
把大盒子的二維碼opacity 爲0，裏面的二維碼是個圖片顯示，
ios上有時候長按會跑到別的地方
分享出去的頁面 想要個分享圖片
就直接在bod裏面寫個img標籤，寬高0
function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}
安卓手機點擊的時候 有藍色遮罩
    -webkit-tap-highlight-color:rgba(0,0,0,0)
安卓的input number類型有上下箭頭
input::-webkit-outer-spin-button,           去掉input的value的上下箭頭
input::-webkit-inner-spin-button{             
   -webkit-appearance: none !important;           
}