移动端常见的兼容性问题

一般上传的视频都没法占满video，看起来很不美观，解决办法很简单

video{ object-fit:fill; }

上传图片，支持预览

html
<input type="file" name="" class="upload-pic">
<div class="pics-area-wrap img-div"></div>
js
//page对象
getUploadPicBtn:document.getElementsByClassName("upload-pic")[0],   
//上传照片
        this.getUploadPicBtn.addEventListener('change',this.openFile.bind(this));
openFile:function(){
        //选择图片并预览。
        var tip = "请上传jpg、png格式的图片";//提示消息
        // this.getPicsAreaWrap.innerHTML = "";
        var _this = this;
        if(window.FileReader){
            // console.log(_this.getUploadPicBtn.files);
            for(var i=0,f;f=_this.getUploadPicBtn.files[i];i++){
                var fr = new FileReader();
                fr.onload = function(e){
                    // alert(_this);  // this 指向FileReader
                    var src=e.target.result;
                    if(!_this.validateImg(src)){
                        alert(tip);
                    }
                    else{
                        _this.showPrvImg(src);
                    }
                }
                fr.readAsDataURL(f);
            }
        }
        else{
                if(!/\.jpg$|\.png$|\.gif$|/i.test(_this.getUploadPicBtn.value)){
                    alert(tip);
                }
                else{
                    _this.showPrvImg(_this.getUploadPicBtn.value);
                }
        }
    },
    validateImg:function(data){
        var pos=data.indexOf(",")+1;
        for(var e in this.filters){
            if(data.indexOf(this.filters[e]) === pos){
                return e;
            }
        }
        return null;
    },
    showPrvImg:function(src){
        var img = document.createElement("img");
        img.src = src;
        img.width=165;
        img.height = 200;
        this.getPicsAreaWrap.appendChild(img);
    },

关于input[type=”file”]按钮的美化

html
<div class="btn-upload">
    <input type="file" name="" class="upload-pic">
</div>
<span class="btn-text">上传照片</span>
css
.content .content-part.content-four .btn-upload input[type='file']{
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
    font-size:2.5rem;/*改变input大小*/
}
.content .content-part.content-four .btn-upload{
    width: 170px;
    height: 34px;
    overflow: hidden;
    display: inline-block;
    margin-top: 30px;
    cursor: pointer;
    background-color: #f0ad4e;
    border-radius: 5px;
    text-align: center;
    line-height: 35px;
}

安卓浏览器看背景图片，有些设备会模糊。

background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;  //或者设置contain
background-size: 50px 50px;display:inline-block; width:100%; height:50px;

防止手机中网页放大和缩小

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
当然，user-scalable=0,有的人也写成user-scalable=no，都可以的。
5、apple-mobile-web-app-capable
apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。
语法：

<meta name="apple-mobile-web-app-capable" content="yes">

如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

6、format-detection
format-detection 启动或禁用自动识别页面中的电话号码。
语法：

<meta name="format-detection" content="telephone=no">
说明：
默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。

上下拉动滚动条时卡顿、慢

body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}

禁止复制、选中文本

Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}

iphone及ipad下输入框默认内阴影

Element{
-webkit-appearance: none; 
}

ios和android下触摸元素时出现半透明灰色遮罩

Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}

某些Android手机圆角失效

background-clip: padding-box;

顶部状态栏背景色

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

// ios 输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />

// ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
a,button,input,textarea{
  -webkit-tap-highlight-color: rgba(0,0,0,0;)
  -webkit-user-modify:read-write-plaintext-only;
} 
/* -webkit-user-modify 这个属性使用需谨慎，副作用就是输入法不再能够输入多个字符
另外，有些机型去除不了，如小米2
对于按钮类，不使用a或者input标签，直接用div标签 */

// 表单元素的默认外观重置
  -webkit-appearance:none;

// 修改表单输入框 placeholder 的颜色值
  input::-webkit-input-placeholder{color:#ccc;} 
  input:focus::-webkit-input-placeholder{color:#eee;} 
// 注意 placeholder,  ios 可以换行，android 不可以

// 禁用 select 默认下拉箭头
select::-ms-expand {display: none;} 

// 禁用 radio 和 checkbox 默认样式
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { 
  display: none; 
}

// 禁用 PC 端表单输入框默认清除按钮
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { 
  display: none; 
}