清除手机浏览器默认样式 问题积累

一、IOS上长按连接或者图片会默认弹出系统菜单，-webkit-touch-callout 能够禁止这个菜单的弹出（菜单默认是开启的），安卓不起做用

a,img {

-webkit-touch-callout: none;

}

二、禁止选择文本（若是没有选择文本须要，建议最好加上）

html,

body {

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

三、避免屏幕旋转致使字体大小缩放

body {

-webkit-text-size-adjust: 100%;

}

四、透明度设置为0，去掉点击连接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)

body {

-webkit-tap-highlight-color: rba(255, 255, 255, 0);

}

利用此属性，设置touch时连接区域高亮为50%的透明红，只在ios上起做用。android上只要使用了此属性就表现为边框。在body上加此属性，这样就保证body的点击区域效果一致了

body {

-webkit-tap-highlight-color: rba(255, 255, 255, 0);

}

五、隐藏地址栏

settTimeout(function (){

window.scrollTo(0, 1);

}, 0);

六、开启电话、短信功能

// 电话

<a href="tel:10086">10086</a>

// 短信

<a href="sms:10086">10086</a>

// 邮箱

<a href="mailto:example@gmai.com">example@gmail.com</a>

七、判断屏幕方向

switch (window.orientation){

case -90:

case 90:

alert("横屏:" + window.orientation);

break;

case 0:

case 180:

alert("竖屏:" + window.orientation);

break;

}

八、关闭 IOS 输入框首字母大写

<input type="text" autocapitalize="off" />

九、关闭 IOS 输入自动修正

<input type="text" autocorrect="off" />

10.关闭 IOS 自动电话识别

<meta name="format-detection" content="telephone=no" />

11.想要去除文本框的默认样式可使用-webkit-appearance，

-webkit-appearance: none;//消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式

聚焦时候默认样式的取消是-webkit-tap-highlight-color。

12-webkit-overflow-scrolling

-webkit-overflow-scrolling:touch;// 局部滚动(仅iOS 5以上支持)

一， 样式问题

问题1： 适配Android 4.1 placeorder问题 对不齐，设置 height == line-height 无用

解决：line-height: normal;

问题2： 呼出 iOS 数字键盘

解决： 设置 input 的 type＝"tel"

问题3： 去掉 input 首字母大写及联想功能

解决： <input autocomplete="off" autocorrect="off" />

问题4： Android 下 input focus 高亮外框没法消除

解决：

textarea, input{

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

-webkit-user-modify: read-write-plaintext-only;

outline: none !important;

}

问题5： OPPO input:button 或者 button 元素设置了圆角 border-radius 并设置了背景色时没法盖住背景色

解决： background-clip: padding-box;

问题6： 阻止被特定区域挡住的 DOM 元素响应事件

解决： pointer-events: none; 若是该特定区域内部须要响应事件，则将内部元素设置为 pointer-events: auto;

问题7： 禁止 iOS 呼出菜单/保存图片/新窗口打开连接/完全干掉点击效果

解决： -webkit-touch-callout: none;