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

作者: larryzhao | 来源:发表于2017-01-08 22:10 被阅读1369次

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

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

    相关文章

      网友评论

      • 旅人318:高手,手机uc浏览器可以自动刷网站吗,好像不可以。
      • 八色:拉瑞哥,看你新头像还以为你被打肿了眼🙄
        八色: @larryzhao 😂很魔性
        larryzhao: @八色 哈哈哈,是不是很萌啊
      • 2453cf172ab4:很给力
      • Writeonce默:不明觉厉
      • LostAbaddon:footer那个,应该是很多广告都用这个做友链或广告才被弄的吧。
        larryzhao:@塔塔酱 太草率了
        LostAbaddon:@larryzhao 看一些标签或ID、class甚至样式反正是妥妥上黑名单的。
        larryzhao:@塔塔酱 也许是吧,我不知道里面的原因。

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

      本文链接:https://www.haomeiwen.com/subject/cfxcbttx.html