移动端css样式设置

1、移动端字体定义

body{font-family: Helvetica;}

说明：在pc端，我们通常都会使用“微软雅黑”字体。但在移动端，ios、 android、winphone三大系统都没有“微软雅黑”字体。各手机系统都有自己的默认中文字体，且肉眼很难看出区别。所以在无特殊需求的情况下，直接使用系统默认中文字体就好。

英文和数字都设定为 Helvetica，三种系统都支持。而且，在ios中默认的英文和数字是两种不同的字体，如果不设置成一种字体，显示效果不一样。

2、取消chrome浏览器下默认的文本框聚焦样式。这个解决办法同pc端相同。

没有做设置的情况下，在chrome浏览器中激活input元素。会在input框的周围出现边框。

说明：只要在css样式中，做如下设置即可解决。

input，textarea{outline:none;}

3、移动端长按图片(img)、链接(a)或其他对象，会弹出系统菜单。

例如：在联通的一个业务办理页面，长按按钮后，会弹出系统菜单。

说明：阻止长按页面，弹出菜单的方法。（此方法只针对ios系统，android系统尚未解决）

a, img {-webkit-touch-callout:none;}

4、移动端如何清除输入框内阴影

在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，可以按照下面的方法关闭：

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

5、移动端，默认情况下当设备切换到横屏显示时，文字大小会发生变化。但如果要禁止文字自动调整大小，ios设备可使用下面的做法：

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

但此方法只对chrome27.0 版本以下有效，27.0以上版本无效。

那么，在新版的chrome，可以使用css3方法，使文字大小不发生变化。这种方法最好运用到具体的对象上。

.box{transform:scale(0.875);}

6、去掉点击链接时，产生的半透明遮罩。

使用ios系统手机的用户，在点击一个链接时，会出现一个半透明灰色遮罩。如下面的例子。

这是招商银行的一个宣传页面，当“点击购买”按钮，就会出现一个灰色的半透明遮罩。

如果想要去掉这个遮罩，可设置-webkit-tap-highlight-color的alpha值为0。部分android系统中元素被点击时，也会产生半透明遮罩或者边框，也用此方法解决。

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

对于有些机型无法去除，建议可以更换html标签来表示按钮。如把a,input改用div标签。

7、修改输入框提示信息placeholder的文字颜色。

placeholder的文字颜色与输入内容的文字色不同，默认是浅灰色的。如要与输入内容的文字颜色保持一致，可做下面的设置：

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #000; 
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #000;
}
:-ms-input-placeholder{
    color: #000;
}
::-webkit-input-placeholder{
    color: #000;
}

为了不出现兼容性问题，要对火狐、Ie、谷歌浏览器分别做设置。

如果要对某个标签或类，id做设置，可以在前面加上就好：

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #000; 
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #000;
}
input:-ms-input-placeholder{
    color: #000;
}
input::-webkit-input-placeholder{
    color: #000;
}