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

最新推荐文章于 2021-08-04 00:22:14 发布

weixin_34308389

最新推荐文章于 2021-08-04 00:22:14 发布

阅读量310

点赞数

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

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

<li>
　　<div style="background: url(/resources/main/images/button111.png) no-repeat;width:100%;min-width:130px;">
　　　　<a style="display:block;color:white;font-weight:bold;text-align:center;text-decoration: none;" href="tel:135727322177">135727322177</a>
　　</div>
</li>

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

摘录：

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

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

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

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

链接聚焦（hover）

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

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

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

Web标准的支持

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

针对iPad与iPhone的样式区分：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width:480px)" href="iPhone.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width:768px) and (max-device-width:1024px)" href="iPad.css" />
<!--<[end IE]>-->