小红书的内置浏览器(WebView)有一个非常影响 C 端转化的问题:它在页面右下角悬浮了两个固定的 UI 元素(点赞和评论图标)。如果 H5 页面的底部按钮或者悬浮表单没有避开这两个区域,用户点击时就会跳转去小红书 App 的评论区,导致严重的转化流失。
实测数据:
- 浮动按钮距离屏幕底部大概在
80px - 120px之间。 - 距离右侧边缘大概
20px。 - 如果页面用了固定的“一键购买”或“返回顶部”按钮,大概率被完全遮挡。
解决方案:在做小红书端 H5 时,给底部的固定栏增加 margin-right 或向右的 padding,把核心操作按钮往左移,或者上浮。同时,如果你的页面有弹窗,一定要考虑这个浮动层的 `z-index`。
用预览工具加载你的页面,选择“小红书内置浏览器”预设,一眼看出右下角有没有冲突。