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 条评论
登录 后参与评论

相关文章

来自专栏腾讯大讲堂的专栏

打造H5动感影集的爱恨情仇【动画性能篇】

作者:谭照强,热爱折腾前端,喜欢新奇创意的程序员,业余喜欢玩摄影,弄咖啡。 “你听说过动感影集么?” 动感影集是QQ空间新功能,可以将静态的图片轻松转变为动态的...

24912
来自专栏xingoo, 一个梦想做发明家的程序员

CSS布局那点事儿

布局 最开始老的一代网站开发,布局都是通过表格实现的。 这样可以形成规整的网格布局,但是也会带来一定的复杂性。比如想要新增某个页面元素,就有可能要改动整个表格...

2225
来自专栏向治洪

react-native-android之初次相识

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

1826
来自专栏阿凯的Excel

常见图表绘制(汇总版)

各位亲,分享了这么多期图表,打算做个汇总版的,方便各位以后查询。点击标题可以直接链接至对应的文章! 第一节:巧妙设置目标红线 ? 第二节:帕累托图绘制 ? 第三...

2946
来自专栏前端知识分享

第134天:移动web开发的一些总结(二)

width —— 视口宽高 height —— 视口宽高 device-width —— 设备的宽高 device- height —— 设备的宽高 orien...

1521
来自专栏WindCoder

自定义swiper动画之实现两段动画效果

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。但若是一个元素需要两个甚至多个动画等样式时,原本的动画特效便难以满足...

2701
来自专栏互联网杂技

H5动画开发快车道

前言 以往做一些H5的运营项目,都是动画设计师使用Animate cc(原来的Flash)先设计好动画原型,然后交给我们UI开发来实现。做过动画开发的童鞋都知道...

5588
来自专栏阮一峰的网络日志

最佳网页宽度及其实现

以minifun.cn为例,根据Google Analytics的统计,半年多以来,访问者的屏幕分辨率一共有81种。最小的分辨率是122x160,这应该是手机;...

1053
来自专栏HTML5学堂

DIV+CSS布局和TABLE布局的优缺点

HTML5学堂:TABLE布局是早以前CSS不存在的时候兴起的,是对TABLE标签的不正规使用,Table标签就是表格,是用来显示数据的,而不是用来布局网页的,...

3329
来自专栏玩转全栈

小程序怎么将视觉搞实现成ui

这个真的是强烈建议,对于一个页面,首先应该大致的看一下可以划分为哪几个模块,通常的划分方式是,整体来看,是row排列,还是column排列的,那么,最擅长做这种...

32517

扫码关注云+社区