博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
UC browser对CSS的支持小结——手机网站CSS小结
阅读量:6829 次
发布时间:2019-06-26

本文共 1777 字,大约阅读时间需要 5 分钟。

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

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

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

    摘录:

    1. UC会判断打开的网站是不是WAP站,从而造成它(UCWEB)认为是WAP站和不是WAP站的解析不同。例如:和Wap.a.com两者指向的为同一个服务器的同一个目录,结果会发现两者解析出来的样式不同。主要体现在margin,padding,background-image的支持不一样。
    2. UC的WinPhone版对白颜色的字体的支持不好,会解析成黑色
    3. UC的Iphone版如果是白颜色字,背景又为图片时,会白颜色的字显示不出来,但如果你点击的话发现确实又存在该链接
    4. UC的预加载,UC会预加载一些链接(预加载后访问速度会特别快,因为已经加载好了),预加载的链接会显示绿色,这就要求我们设计效果图的话得考虑到这个问题
    5. UC对Response.Redirect的支持不是很好,有时候甚至地址栏的链接根本就不跳转(还是现在的链接)。例如这个问题:和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

    你可能感兴趣的文章
    [CS] 来电处理流程
    查看>>
    我的友情链接
    查看>>
    cin.ignore与cin.getline的体验
    查看>>
    powershell常用命令
    查看>>
    我的友情链接
    查看>>
    linux 查看编码格式、用户及组状态
    查看>>
    squid FATAL: Received Segment Violation...dying.
    查看>>
    mem调优
    查看>>
    内核编译安装学习笔记
    查看>>
    做好数据备份 对你多重要
    查看>>
    Maven项目导出工程依赖JAR包
    查看>>
    tomcat修改时区
    查看>>
    dojo.declare,dojo.define,dojo.require解释
    查看>>
    浏览器的重绘与重排
    查看>>
    Web开发必知的八种隔离级别
    查看>>
    酷炫的显示主页面
    查看>>
    org.apache.catalina.startup.Catalina start之过程分析
    查看>>
    CAA如何进行干涉检查?
    查看>>
    silverlight vs flash
    查看>>
    我的友情链接
    查看>>