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

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

这些功能,在大部分手机浏览器中都很完好,但是在上线后,在 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 浏览器上碰到的三个兼容性问题就都解决了。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 26,452评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,268评论 1 92
  • Spring Web MVC Spring Web MVC 是包含在 Spring 框架中的 Web 框架,建立于...
    Hsinwong阅读 20,294评论 1 90
  • Getting Started Burp Suite 是用于攻击web 应用程序的集成平台。它包含了许多工具,并为...
    Eva_chenx阅读 27,113评论 0 14
  • 你总爱多想 我不爱解释
    1加七阅读 85评论 0 0
  • 做梦梦到了我成了有超能力的人。原来我在一个超能力组织里工作,但是因为某件事我触犯了组织,老大们将我锁定进监狱。有一...
    shamumu阅读 149评论 0 0
  • 我淡然一笑 剪去了 日子里生出的一根白发 欣然接住 光阴分娩的又一个新春 那一天我们守夜 欲把喧嚣久长 却在黎明 ...
    月靥星语阅读 228评论 0 6