前端入门

发表于 | 更新于

meta标签

移动端页面设置视口宽度等于设备宽度

1
<meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' />

禁止将页面中的数字识别为电话号码

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

忽略Android平台中对邮箱地址的识别

1
<meta name='format-detection' content='email=no' />

css

css设置元素操作

1
2
3
4
// 设置无效操作
div {pointer-events: none;}
// 设置无法选中
div {user-select: none;}

webkit去除表单元素的默认样式

1
div{-webkit-appearance:none;}

修改webkit表单输入框placeholder的样式

1
2
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

去除android a/button/input标签被点击时产生的边框 & 去除ios a标签被点击时产生的半透明灰色背景

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

input

input上传图片视频

1
2
<input type='file' accept='image/*'>
<input type=file accept='video/*'>

取消input在ios下，输入的时候英文首字母的默认大写

1
<input autocapitalize='off' autocorrect='off' />

打电话和发短信

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