奇思乎乎乎 iPhone 16e · 17 系列 · Air - 一束网址,折射万屏
100%

输入网址,立刻开始预览

预设:
自定义:

小红书内置浏览器 H5 适配

小红书的内置浏览器(WebView)有一个非常影响 C 端转化的问题:它在页面右下角悬浮了两个固定的 UI 元素(点赞和评论图标)。如果 H5 页面的底部按钮或者悬浮表单没有避开这两个区域,用户点击时就会跳转去小红书 App 的评论区,导致严重的转化流失。

实测数据:

  • 浮动按钮距离屏幕底部大概在 80px - 120px 之间。
  • 距离右侧边缘大概 20px。
  • 如果页面用了固定的“一键购买”或“返回顶部”按钮,大概率被完全遮挡。

解决方案:在做小红书端 H5 时,给底部的固定栏增加 margin-right 或向右的 padding,把核心操作按钮往左移,或者上浮。同时,如果你的页面有弹窗,一定要考虑这个浮动层的 `z-index`。

用预览工具加载你的页面,选择“小红书内置浏览器”预设,一眼看出右下角有没有冲突。

常见问题

小红书 WebView 为什么点按钮会跳评论?
因为小红书的原生 App 在 WebView 顶层盖了一层 UI,你的 H5 按钮如果在下层且位置重合,点击事件会被原生层拦截。
怎么判断页面被小红书遮挡了?
可以用本工具,选择包含“小红书”尺寸的预设,或者在手机真机上分享到小红书测试。

相关工具