CSS 移动端样式重置

移动端数字识别

复制<!-- 以最高版本的ie渲染显示 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">  

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

• format-detection：格式检测
• telephone：主要作用是是否设置自动将你的数字转化为拨号连接
  • telephone=no：禁止把数字转化为拨号链接
  • telephone=yes：开启把数字转化为拨号链接，默认开启
• email：告诉设备不识别邮箱，点击之后不自动发送
  • email=no：禁止作为邮箱地址
  • email=yes：开启把文字默认为邮箱地址，默认情况开启
• adress：跳转至地图功能
  • adress=no：禁止跳转至地图
  • adress=yes：开启点击地址直接跳转至地图的功能, 默认开启

圆角bug

部分 Android 手机圆角失效

复制Element{
  background-clip: padding-box
}
css

IOS

• IOS 链接按钮点击时的灰色遮罩问题

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

• IOS 下按钮和输入框的默认样式

复制button,input {
  -webkit-appearance: none;
  border-radius: 0;
}
css

禁止文本缩放

复制html {
  -webkit-text-size-adjust: 100%; 
}
css

禁止默认操作

复制body {
  -webkit-user-select:none;
  -webkit-touch-callout:none; /* 系统默认菜单被禁用 */
}
css

placeholder样式

复制input::-webkit-input-placeholder {
  color:#000;
}
input:focus::-webkit-input-placeholder{
  color: blue;
}
css