简书技术团队程序员首页投稿(暂停使用,暂停投稿)

移动页面在 UC 浏览器中碰到的几个问题

2017-01-08  本文已影响1369人  larryzhao

前两天简书的网站改版上线了,同时上线的还有改版增强的移动端网页,这次我们在移动端网页中增加了登录、点赞和评论功能。

这些功能,在大部分手机浏览器中都很完好,但是在上线后,在 UC 浏览器的 iOS 和安卓端都出现了比较严重的问题(这些问题在我们和正式域名不同的测试部署上都没有出现),经过一天多的排查,把问题都解决了,这里总结一下以便大家以后碰到可以更快的解决问题。

广告过滤

UC 浏览器具备 广告过滤 的功能,默认打开,可以在设置中关闭,上线之后发现,在广告过滤功能开启的情况下,UC 浏览器过滤了网页所有的图片,包括用户头像,文章图片(简书移动页面没有包含任何广告,只有简书 App 的下载 banner 提示)都被过滤了无法显示。

全部图片都被 UC 广告过滤阻拦

这个问题从我们开发者的角度可以做的不多,需要 UC 调整广告策略,可以尝试联系 开发者中心_UC优视 下方的联系方式沟通。

莫名移除特定元素

简书移动页面底部有一个 </p><div class="footer"> 元素,里面是 登录打开 App 两个按钮,如下图:

简书底部的 footer 元素

这个元素在上线之后,我们发现以一种很随机的情况出现和消失,非常没有规律。灵机一动之下,尝试改了一下 class 名称, footer 改为 login-footer 后发现问题解决了,看来也许 UC 浏览器对 class="footer" 有特殊对待,这点无法确定。

Body 为空的 POST 请求

最挠头的一个问题是,上线之后我们发现,所有的 POST 请求都失效了,而且失败的情况非常特别。请求发出后,收到的是 200 成功的 Status Code, 然而收到的 Response Body 里却是我们出现 404 时返回的错误信息。

经过一些调查发现,UC 浏览器代理了所有的请求,同时把我们的 POST 请求改成了 GET 请求发给我们的服务器:

POST 请求被 UC 代理变成 GET

挠头一阵之后,发现 UC 是把所有 body 为空的 POST 请求全部改为 GET,所以在所有空 POST 请求中都加一个其实无用的参数 { f: 1 },就可以防止 UC 把这个 POST 请求。

至此在 UC 浏览器上碰到的三个兼容性问题就都解决了。

上一篇 下一篇

猜你喜欢

热点阅读