1、移动端点击a标签出现的背景色
a,
a:hover,
a:active,
a:visited,
a:link,
a:focus {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
outline: none;
}
2、对于超出div范围的内容进行省略号（...）显示
2.1、单行显示
div{
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
2.2、多行显示
div{
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;//可以输入你想要的行数
display: -webkit-box;
-webkit-box-orient: vertical;
}
2.3、正常情况下是没有问题的，但是如果你对你的代码进行webpack打包，可能就会出现打包后-webkit-box-orient: vertical;消失了，这个时候就需要这样实施了：
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
如果你使用的是webpack自带的打包配置，则需要注释掉webpack.prod.conf.js中的如下插件
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
并且在util.js中的如下部分加入minimize:true
const cssLoader = {
loader: ‘css-loader‘,
options: {
sourceMap: options.sourceMap,
minimize: true
}
}
这样在生产环境中打包的css也会压缩，并且使那个样式消失。
3、百度禁止转码
通过百度打开网页时，百度可能会对你的网站进行转码，往你页面上添加广告之类的，我们可以通过meta标签来禁止它：
<meta http-equiv="Cache-Control" content="no-siteapp" />
4、设置状态栏的背景颜色（IOS）
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
content参数：
- default: 状态栏背景是白色
- black:状态栏背景是黑色
- black-translucent：状态栏背景是半透明。如果设置为default或者black,网页内容从状态栏底部开始。如果设置为black-translucent，网页内容充满整个屏幕，顶部会被状态栏遮挡。
5、h5页面窗口自动调整到设备宽度，并且禁止缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
- width：设置viewport的宽度，为一个正整数，或者一个字符串‘device-width’
- height：设置窗口高度，一般设置了宽度，会自动解析出高度，可以不用设置
- initial-scale：默认缩放比例，为一个数字，可以带小数
- minimum-scale：允许用户最小缩放比例，为一个数字，可以带小数
- maximum-scale：允许用户最大缩放比例，为一个数字，可以带小数
- user-scalable：是否允许手动缩放
6、可隐藏地址栏(IOS)
<meta name="apple-mobile-web-app-capable" content="yes" />
7、移动端手机号码识别(IOS)
在IOS Safari上会对那些看起来像是电话号码的数字处理为电话链接，我们可以通过meta来关闭对电话号码的自动识别：
<meta name="format-detection" content="telephone=no" />
在页面中标签实现打电话
<a href="tel:0755-10086">打电话给:0755-10086</a>
发短信
<a href="sms:123456">123456</a>
8、移动端邮箱识别(Android)
在安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下meta来管理邮箱的自动识别：
<meta content="email=no" name="format-detection" />
邮件的实现方法：
//1.普通邮件 <a href="mailto:826248794qq.com">点击我发邮件</a> //2.收件地址后添加?cc=开头，可添加抄送地址（Android存在兼容问题） <a href="mailto:826248794@qq.com?cc=zengfp@yeah.net">点击我发邮件</a>
9、优先使用最新版本IE和Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
10、表单输入框上的placeholder的颜色值得改变
input::-webkit-input-placeholder{color:#ff1234;}
input:focus::-webkit-input-placeholder{color:#ff1234}
11、禁止文本缩放
当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，如果你不需要这样，可以选择禁止。在pc端该属性已经被移除，若该属性要在移动端生效，必须设置meta viewport
html {
-webkit-text-size-adjust: 100%;
}
12、移动端禁止选中内容
div{
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all （移动端不需要） */
-ms-user-select: none; /* IE 10+ */
}
13、禁止保存或者拷贝图片（IOS）。当在手机上长按图片img，会弹出选项保存图片或者拷贝图片，如果你不想用户这样操作，你可以设置以下样式禁止
img { -webkit-touch-callout: none; }
14、audio元素和video元素在ios和android中无法自动播放。我们可以设置触屏即播
$(‘html‘).one(‘touchstart‘,function(){
audio.play()
})
15、手机拍照和上传图片的<input type="file" />的accept属性
<!-- 选择照片 --> <input type=file accept="image/*"> <!-- 选择视频 --> <input type=file accept="video/*">
16、消除transition闪屏
div{
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-transform-style: preserve-3d;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
-webkit-backface-visibility: hidden;
}
17、开启硬件加速，解决页面闪白，保证动画流畅
div{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
18、关闭IOS键盘首字母自动大写。
<input type="text" autocapitalize="off" />
19、解决字体在移动端比例缩小后出现锯齿的问题
-webkit-font-smoothing: antialiased;