移动端常见页面样式问题

1.iOS上input和textarea阴影

input,textarea{-webkit-appearance: none;appearance: none;}  

2.修改placeholder样式

input::-webkit-input-placeholder{color:red;}

input:focus::-webkit-input-placeholder{outline:none} //聚焦时

3.移动端头文件

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

4.未加滚动组件的页面，滚动不流畅问题

-webkit-overflow-scrolling: touch;

5.使用 a标签的时候，移动端长按会出现一个 菜单栏，这个时候禁止呼出菜单栏的方法如下（别人博客里看到的，未测试）：

a, img { -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/ }

6.从上到下的背景渐变

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(red, blue); /* 标准的语法 */

从左到右的背景渐变

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(to right, red , blue); /* 标准的语法 */