移动端问题整理

H5常见问题

如果你有更好的解决方法，或者建议，或者其他移动端问题的解决方法，不吝赐教 !

移动端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; }

输入框默认内阴影

        /* iphone及ipad下输入 __框默认内阴影__ */
        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%;
}

按钮样式被默认样式覆盖

        /* ios 设置input 按钮样式会被默认样式覆盖 */
            input,
            textarea {
              border: 0;
              -webkit-appearance: none;
            }

默认首字母大写

        <!-- IOS键盘字母输入，默认首字母大写 -->
        <input type="text" autocapitalize="off" />

行高无法垂直居中的问题

        /* line-height 在移动端的无法垂直居中的问题 */
    html{-webkit-text-size-adjust:none;}
     /* 不知道管不管用，还没试 */

改变placeholder的字体颜色

        input::-webkit-input-placeholder{color:#AAAAAA;}
        input:focus::-webkit-input-placeholder{color:#EEEEEE;}

禁止长按触发系统菜单

        /* 禁止ios长按时触发系统的菜单，以防 ios或者android 长按时下载该图片 */
        .css
                /* */{-webkit-touch-callout: none}

下拉选择设右对齐

        /* select 下拉选择设置右对齐 */
            select option {
                direction: rtl;
            }

出现一个六分之一空格

        /* 关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格 */
        /*可以通过正则去掉*/
        this.value = this.value.replace(/\u2006/g, '');

动画定义3D硬件加速

        /* */
        element {
              -webkit-transform:translate3d(0, 0, 0)
              transform: translate3d(0, 0, 0);
}
                /* 注意：3D变形会消耗更多的内存与功耗 */

Retina屏的1px边框

        element{
            border-width: thin;
}

transition闪屏

        /* */

        {/* 设置内嵌的元素在 3D 空间如何呈现：保留3D */
        -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展开

            /* zepto方式: */
            $(sltElement).trrgger("mousedown");
            /* 原生js方式:*/
            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无法自动播放

            /* 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" />

上去掉语音输入按钮

        /* android */
        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

参考资料：