移动端一些问题

移动端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" οnfοcus="(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;           

}

原文链接：http://www.qdfuns.com/notes/32547/fb74e4606a5a14148c82bb4856898d0d.html