移动页面在 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 浏览器上碰到的三个兼容性问题就都解决了。

相关文章

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

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

  • 移动web终端 viewport设置

    移动web,顾名思义就是在移动端的web页面,比如我们可以在手机的UC浏览器中访问淘宝等网站: 可以发现淘宝的移动...

  • Vue移动端开发问题纪要

    Vue移动端开发问题纪要 UC浏览器兼容性问题 现象 在部分Android机型中的UC浏览器下访问,出现白屏现象 ...

  • APP埋点:实时召回你的APP用户

    如果你手机上,装了UC浏览器这个APP,你在使用UC浏览器的过程中,如果截图了,能看到如下的页面: Android...

  • 调试移动端页面

    移动端页面调试比PC端要复杂不少,不过有一些比较好的工具可以让这个过程简化。下面介绍两个工具。1,UC移动端浏览器...

  • 关于单行、多行文字超出显示省略号

    WebKit浏览器或移动端的页面 在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较...

  • 多行文字省略解决方案

    WebKit浏览器或移动端的页面在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简...

  • 仿UC头条滑动效果

    仿UC头条滑动效果 一、UC头条的滑动效果 UC头条的滑动效果有两个地方: 在主页面的滑动过程中,左右两个页面中的...

  • 夜间模式微交互

    常规交互: 菜单中通过切换按钮手动切换夜间日间模式(移动端UC浏览器) 预定交互: 基于常规,在设置项新增 “白天...

  • H5历史管理

    浏览器中的前进后退 如何触发历史管理 1,通过跳转页面 2,在单个页面进行历史管理 很多的应用是单页面的开发,移动...

网友评论

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

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

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