先强调


1、这里所说的css规则是通用型的css规则,以能适配绝大部分手机和第三方浏览器为先决条件。

2、手机浏览器有无数种,我们最好是使用较原始和较简单的样式来实现常见的效果。

3、随着智能手机的普及,超低端手机也在逐年减少,我们需要适当地考虑略微复杂的样式,放弃适配部分手机奇特的样式问题

需要注意的一些问题


1、慎重使用css的position

在手机浏览器中position普遍存在问题,特别是fixed,在ios和android的浏览器上都很难支持好。而absolute在一些低端手机上完全就不是我们认为的绝对定位甚至无法识别,relative也同样会有神奇的状况发生,所以在编写代码前就需要了解到这样的隐患。除非降低适配范围。

2、慎重使用css的float

float在普通手机上通常都无法识别或者表现出问题,尤其是第三方浏览器如uc和qq浏览器,这样会导致页面的表现差异太大。

3、不支持overflow:auto/scroll 局部滚动

这个至今都没有手机支持。需要注意的是有的手机上,如果元素的宽度超过了屏幕的宽度,可能会有横向滚动条,也可能没有横向滚动条,超出的部分将看不见,另外,图片超过了屏幕宽度时,并且没有设置图片宽度的话,有的手机会自动缩放图片到屏幕宽度。

4、不需要设置中文字体,字体大小也不用设置,保持默认,但是需要注意input,textarea,select,option内的文字是要比默认的要大,因此需要设置font-size:100%;如果确实需要与普通文字有所区别,那么可以设置font-size:large和small的。也就是说比较通用的font-szie只有3种,large、medium和small,如果你非得使用其他固定的字号,也是可以,只是可能在一些手机上表现出来的状况与我们想象的不一样而已。同时需要了解一下,普通手机上的默认字号大小略为13px但不等于13px,iphone和android上的默认字号是16px。

5、list-style不靠谱

在一些手机上list-style并不能有效地改变默认样式,甚至可能去除不了默认的圆点,因此在构建html的时候就要慎重使用ul和ol。

6、图片与文字垂直居中

这在手机上与pc上的差别实在太大,至今没有找到完美的解决办法,但是我们可以略微变通达到较好的统一。对图片设置css样式vertical-align:bottom(经过多次测试bottom比middle更能让更多的手机实现接近的垂直居中),同时合理调整图片的高度,透明的图片可以通过空白来填充图片高度,一般说来图片高度与文字大小差不多的情况下,比较容易适配。如果在图片上增加align=”absmiddle” 多数手机无效。

7、表单元素的表现情况

部分手机以及第三方浏览器很有可能把select和text类型的input强制作为一行显示,这个在普通手机的uc 和 qq浏览器较为常见

8、table的样式

table是实现低端手机2列式布局和图文混排的关键,但是其样式却也是非常让人揪心的。第3方浏览器的某些版本对table解析差异很大,有的版本基本上可以正常展示,但是td的“padding”可能无法去除

第三方浏览器在样式解析上的一些情况


1、第三方浏览器如uc、qq浏览器的某些版本可能只会保留一些比较基本的样式规则,同时会加入浏览器自身定制的ui,所以很多时候我们使用第三方浏览器得到的页面效果与手机自带浏览器的效果差异很大

2、通常会识别border,background(color),padding这些基本的盒模型样式,基本上不允许设置font-size

3、由于第三方浏览器在某款机型上预装之后,就极有可能这在手机的一生当中都不会更新,但是第三方浏览器却是在持续更新的,所以市场上会出现大量的浏览器版本。我们开发的时候针对第三方浏览器基本上是持一个“阅读无障碍,看着还顺眼”的态度进行。开发调试期间不以第三方浏览器为基准,但是需要适当兼顾,甚至调整产品方案