UC浏览器皮肤的那个坑

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

UC浏览器皮肤的那个坑

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

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

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5学堂 - H5course</title>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <style>
        html {
            font-size: 40px;
        }
        .wrap {
            color: #319080;
        }
        .wrap2 {
            color: #ff0000;
        }
        .wrap3 {
            color: #CF1C1D;
        }
    </style>
</head>
<body>
    <div class="wrap">HTML5学堂</div>
    <div class="wrap2">HTML5学堂</div>
    <div class="wrap3">HTML5学堂</div>
</body>
</html>

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

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

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

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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-01-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大史住在大前端

一统江湖的大前端(1)——PPT制作库impress.js

impress.js 是一款基于 css-3D 和 css动画 、受到高逼格PPT原型工具 prezi 启发而开发的演示文稿制作库,github上星星高达33k...

883
来自专栏非著名程序员

微信小程序优秀开发资源汇总

? 说实话,我最近大概有半年多再也没有敲过 Android 的代码了,所以对于 Android 方面的内容可能分享的比较少了,这半年一直在做微信小程序的开发,...

5194
来自专栏海说

微信小程序实例

UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ...

1.1K8
来自专栏梁源的专栏

React Native 用JavaScript开发移动应用 - 思维导图

1374
来自专栏吴老师移动开发

Flutter是什么?

Flutter是Google一个新的用于构建跨平台的手机App的SDK。写一份代码,在Android 和iOS平台上都可以运行。

723
来自专栏h5

[高仿版]h5实战仿微信聊天项目

最近也是由于项目需要做一个类似微信聊天功能,需要用html5去实现,如是就开始捣鼓开发了一个h5高仿微信聊天功能,和微信功能,样式非常相似,整体采用flex布局...

40225
来自专栏BestSDK

实用干货|简单9步,教你在PPT中演示动态图表

要在 PPT 里实现可以交互演示的动态图表(不是动画图表哦),可以有以下几种方法来实现: 1. PPT VBA 编程 2. Xcelsius 水晶易表 3. P...

3895
来自专栏向治洪

react-native-android之初次相识

作为一名Android开发者,我的感觉就是,一步一卡,卡的潇洒。 但是我还是要学react-native,不要问我为什么,因为我相信一门解决了原生app,开...

1736
来自专栏企鹅号快讯

四大微信小程序开发工具测评结果出炉!

微信小程序开放公测后,很多人已经迫不及待地开始注册账号了。但是在技术开发的问题上,却不知道该如何下手。经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛...

9767
来自专栏IT派

前端UI框架小汇总

IT派 - {技术青年圈} 持续关注互联网、大数据、人工智能领域 移动端UI框架 Mint UI(饿了么团队) 中文官网:http://mint-ui....

4704

扫码关注云+社区