手机端知识点总结（不定时补充）

meta标签

//H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" 
name="viewport">
//当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari
<meta content="yes" name="apple-mobile-web-app-capable">
//将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
<meta content="black" name="apple-mobile-web-app-status-bar-style">
//忽略将页面中的数字识别为电话号码
<meta content="telephone=no" name="format-detection">
//忽略Android平台中对邮箱地址的识别
<meta content="email=no" name="format-detection">

css/js部分

placeholder元素样式修改

input::-webkit-input-placeholder{color:red;}
input:focus::-webkit-input-placeholder{color:green;}

touch时有蓝色的边框或半透明灰色遮罩

-webkit-tap-highlight-color:rgba(0,0,0,0);

ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

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

webkit表单元素的默认外观怎么重置

.css{-webkit-appearance:none;}

改变input number类型的默认样式

input[type=number]::-webkit-textfield-decoration-container {
        background-color: transparent;    
    }
    input[type=number]::-webkit-inner-spin-button {
         -webkit-appearance: none;
    }
    input[type=number]::-webkit-outer-spin-button {
         -webkit-appearance: none;
    }

禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}

禁止ios和android用户选中文字

.css{-webkit-user-select:none}

页面中打电话/发短信/写邮件

<a href="tel:0755-10086">打电话给:0755-10086</a>
<a href="sms:10086">发短信给: 10086</a>

input type=file上传图片会很慢

1	<input type="file" accept="*">

通过将 * 通配符修改成指定的MIME类型就可解决。例如上传图片

1	<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">

屏幕旋转的事件和样式

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{}
}