Vinson

Vinson

移动端样式重置

发表于 2023-08-06
Vinson
阅读量 44

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
评论
来发一针见血的评论吧!
表情

快来发表评论吧~

推荐文章
  • 测试文章

    20点赞10评论

  • webpack5(一)

    20点赞10评论