Android WebView中overflow:auto引发意外横向滚动问题咨询

问题场景 #

我在Android的<LinearLayout>中嵌入了WebView，页面底部的分页组件用overflow:auto实现横向滚动，代码如下：

<div class="overflow-auto">
    <div class="flex">
        <a href="?page=1">1</a>
        <a href="?page=1">1</a>
        <a href="?page=1">1</a>
        <a href="?page=1">1</a>
        <a href="?page=1">1</a>
        <a href="?page=1">1</a>
        <a href="?page=1">1</a>
        <a href="?page=1">1</a>
    </div>
</div>

桌面端用DevTools模拟移动端时，只有分页组件能横向滚动，页面主体正常；但在Android应用里运行时，页面右侧出现大片空白，整个应用都能横向滚动。把分页组件设为display:none后问题消失，确定是这个组件导致，但DevTools没检测到元素溢出。

可能原因 #

• Viewport未正确配置：Android WebView默认的viewport设置可能没有强制页面宽度适配设备宽度，而桌面DevTools模拟的是标准移动端viewport，这就导致WebView允许页面超出视口宽度。
• WebView的CSS渲染差异：不同版本的Android WebView对flex和overflow:auto的组合渲染有兼容性问题，比如flex容器的最小宽度计算未被正确限制，导致其宽度超出父容器的overflow:auto范围，进而触发全局滚动。
• 触摸滚动逻辑差异：WebView对触摸滚动的处理和桌面浏览器不同，可能把内部滚动容器的溢出错误传递到页面根节点。

解决方案 #

1. 添加正确的viewport标签：在页面头部加入meta标签，强制页面宽度适配设备：

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   

2. 限制flex容器的最小宽度：给flex容器加上min-width:0，避免它自动扩展超出父容器：

   .flex {
       display: flex;
       min-width: 0;
   }
   

3. 给滚动容器设置明确宽度：为overflow-auto的div设置width:100%并开启box-sizing:border-box，防止padding或border导致宽度溢出：

   .overflow-auto {
       overflow: auto;
       width: 100%;
       box-sizing: border-box;
   }
   

4. 优化WebView配置：在Android代码里调整WebView的滚动和视口设置：

   webView.setHorizontalScrollBarEnabled(false);
   webView.getSettings().setLoadWithOverviewMode(true);
   webView.getSettings().setUseWideViewPort(true);
   

内容的提问来源于stack exchange，提问作者himmip