UC browser对CSS的支持小结——手机网站CSS小结

淡淡的烟草味﹌ 2022-01-11 23:25 235阅读 0赞

近期项目中，白色无下划线的链接在iphone中变成了蓝色有下划线，明显iphone不支持该链接的css，赶紧google、百度一下，发现了不少css样式iphone居然不支持。

解决方法：多加一个<div>标签，对a标签定义颜色和下划线，注意a标签不能有背景图片

注意加上a标签后并且设置href内容的好处：可以保证兼容各个手机直接点击手机号码直接拨号

**摘录：**

1.  UC会判断打开的网站是不是WAP站，从而造成它（UCWEB）认为是WAP站和不是WAP站的解析不同。例如：[www.a.com][]和Wap.a.com两者指向的为同一个服务器的同一个目录，结果会发现两者解析出来的样式不同。主要体现在margin,padding,background-image的支持不一样。
2.  UC的WinPhone版对白颜色的字体的支持不好，会解析成黑色
3.  UC的Iphone版如果是白颜色字，背景又为图片时，会白颜色的字显示不出来，但如果你点击的话发现确实又存在该链接
4.  UC的预加载，UC会预加载一些链接（预加载后访问速度会特别快，因为已经加载好了），预加载的链接会显示绿色，这就要求我们设计效果图的话得考虑到这个问题
5.  UC对Response.Redirect的支持不是很好，有时候甚至地址栏的链接根本就不跳转（还是现在的链接）。例如这个问题：[www.a.com][]和Wap.a.com两者指向的为同一个服务器的同一个目录，结果会发现两者解析出来的样式不同。我本来想用跳转方式来实现（不管是Response.Redirect又或是改变http-equiv='refresh' content=""），但是结果发现并不行。个人认为是因为UC只认来源页，不认跳转后的页面。因为我刷新后样式就变好了，同样的问题不止出现在我的页面，UC首页导航里有的也存在这个问题的。

**不支持的CSS-**（比较怀疑其中的一些结论，因为我的项目中一些css属性在实际手机测试中是支持的，姑且先摘录下来吧）

1.  不支持font-family属性，也就是说，在UC浏览器你只能看到一种字体；
2.  不支持font-szie属性，也就是说，在UC浏览器你只能看到一样大小的字体；
3.  不支持width、height、padding、margin、line-height属性，也就是说，在UC浏览器只能通过p、br等HTML标签来换行以达到字符上下间隔；
4.  不支持固定像素的宽度，100%显示页面，也就是说，在UC浏览器始终将看到的是“满屏的”；
5.  不支持浮动、层叠布局，float和position属性无效，也就是说，在UC浏览器你只能看到“左对齐”。
6.  支持background-color，但不支持background-image，也就是说不支持CSS背景图显示，在UC浏览器你只能看到背景色。(表示怀疑，因为有个项目中显示是支持背景图像的)
7.  不支持padding margin
8.  不"支持"表格嵌套，解决的最好办法就是一行放一个，显示的效果肯定是跟自己的想象中是一样的，否则，会与自己的设想有一定差距。
9.  不"支持"map
10. 不支持 line-height
11. 不支持 strong
12. 不支持 ul li
13. 不支持 float
14. input默认有边框，记得加上：border:none;

注明：如果遇上不支持的css，可以改动其标签，如改ul li为table，来解决问题。

**链接聚焦（hover）**

各个浏览器均自定义了链接的hover样式，比如有的浏览器给链接聚焦时加了边框，有的浏览器给链接聚焦时加个背景色之类。因此小屏幕移动设备网页不需要在CSS中编写hover样式。

**鼠标事件（mouseover）**  
考虑到触摸屏操作，用户无法用手指进行over的操作，因此应**禁止在应用于移动设备访问的网页使用****mouseover**。

考虑鼠标触动的效果，比如导航触动的是整个li，而不是简单的a

**Web标准的支持**

确保页面顶部有： <!DOCTYPE html>

**针对iPad与iPhone的样式区分：**

转载于:https://www.cnblogs.com/JoannaQ/archive/2013/02/21/2919887.html

[www.a.com]: http://www.a.com/