HTML5学堂-码匠 HTML5学堂

您当前位于:项目开发经验积累 ——> 移动端项目开发经验 - UC浏览器皮肤对移动端样式造成的影响

移动端项目开发经验 - UC浏览器皮肤对移动端样式造成的影响

2016/01/26 19:58:32 | 作者:HTML5学堂(码匠) | 分类:项目开发经验积累 | 关键词:UC浏览器,移动端兼容,系统样式

UC浏览器皮肤的那个坑

HTML5学堂:在之前的一款游戏开发当中,使用小米的UC浏览器查看移动端样式,出现了“不可思议”的现象。明明设置了深红色的文字,硬生生的变成了绿色,让小编大呼“UC简直就是色盲啊~~~”,后来发现UC浏览器的皮肤是这个问题的罪魁祸首。

UC浏览器皮肤的那个坑

小编之前在做一个游戏开发,为了保证代码的兼容性,使用了各种设备进行了测试。结果所有的设备都没有问题,单单在UC浏览器挂掉,挂掉的原因还不是常见的布局问题,而是“颜色”问题。小编当场表示无语中……明明设置的深红色(#CF1C1D),却显示成了绿色~小编已经怀疑自己是色盲了~当然,在怀疑了2秒钟之后,果断怀疑UC浏览器色盲!

之后尝试将CF1C1D的色值修改成了FF0000,在UC当中又显示成了红色,当时一下子就蒙掉了。过了两天,突然发现同事的那个测试手机,针对UC浏览器设置了“皮肤”。于是小编写了如下这个demo:

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5学堂 - H5course</title>
  6.     <meta name="viewport" content="width=device-width,user-scalable=no">
  7.     <style>
  8.         html {
  9.             font-size: 40px;
  10.         }
  11.         .wrap {
  12.             color: #319080;
  13.         }
  14.         .wrap2 {
  15.             color: #ff0000;
  16.         }
  17.         .wrap3 {
  18.             color: #CF1C1D;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="wrap">HTML5学堂</div>
  24.     <div class="wrap2">HTML5学堂</div>
  25.     <div class="wrap3">HTML5学堂</div>
  26. </body>
  27. </html>

设置绿色皮肤 UC浏览器的显示效果

绿色皮肤 UC浏览器的显示器 - HTML5学堂

正常白色皮肤下 UC浏览器的显示效果

白色皮肤,正常的UC浏览器 - HTML5学堂

最终结论,显而易见,UC浏览器的皮肤(不仅仅是绿色)会使最终显示效果受到影响。这个并非是前端代码编写的问题,当然前端也没有办法改变用户的皮肤设置,因此,各位开发攻城狮们,珍爱生命,远离UC~~~

本文章共耗时1.5小时,责任小编:HTML5学堂-堡堡。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端