移动端常见样式问题

【点击背景】

在移动端，点击可点击元素时，android下会出现淡蓝色背景，IOS下会出现灰色背景。
可以通过-webkit-tap-hightlight-color属性的设置，取消点击时出现的背景效果。

*{
	-webkit-tap-hightlight-color：rgba(0,0,0,0);
}

【appearance】

使用appearance:none主要用来去除表单类元素在浏览器中的内置样式，如去除data类型input域的叉叉，去除number类型input域的上下箭头。

-webkit-appearance:none;

【禁止选中】

通常会使用js来实现，也可以用-webkit-user-select设为none

-webkit-user-select:none;

【禁止文字缩放】

部分手机上，切换横竖屏，会缩放字体。使用如下设置，可以禁止文字缩放

*{
	-webkit-text-size-adjust:100%;
}

[文本渲染]

使用text-rendering:optimizeLegibility属性，可以让浏览器在绘制文本时将着重考虑易读性，而不是渲染速度和几何精度，它会使字间距和连字有效。

text-rendering:optimizeLegibility;

【文本平滑显示】

-webkit-font-smoothing 属性可以用来控制字体的像素显示是否平滑。

none 关闭抗锯齿，字体边缘犀利。
antialiased 字体像素级平滑，在深色背景上会让文字看起来更细了。
subpixel-antialiased字体亚像素级平滑，主要为了非视网膜设备下更好的显示。

body{
	-webkit-font-smoothing:antialiased;
}

【轮廓 outline】

input、textarea等表单类标签，在获取焦点的情况下，在andriod系统下，会出现淡蓝色轮廓outline，使用outline:none将去除。

outline:none;

【placeholder】

placeholder 默认是浅灰色，如果input域是浅灰色背景。则这时placeholder的文本与背景颜色相近，无法清晰显示，就需要设置placeholder的颜色。可以通过伪元素来进行设置：

::placeholder{
		color:#fff;
   }

【清除按钮圆角】

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

【滚动回弹】

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果。

auto使用普通滚动，当手指从触摸屏上移开，滚动会立即停止。
touch使用具有回弹效果的滚动，当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文

body{
	-webkit-overflow-scrolling:touch;
}

一定要设置该属性，否则在IOS下会出现局部滚动不流畅的bug。

【1倍行高】

设置line-height:1，即行高为1时，有的页面会出现文字显示不全的情况，所以行高设置一定要大于1。