Android平台Capacitor应用无法通过Viewport缩小页面问题咨询

创建包含基础内容的HTML页面，添加如下viewport元标签：

<meta name="viewport" content="user-scalable=no, width=500px, initial-scale=0.1, minimum-scale=0.1, maximum-scale=10" />

在PC或Android手机的Chrome浏览器中打开时，页面内容能按预期缩小显示；但将页面放入Capacitor应用后，内容无法缩小。奇怪的是，当把initial-scale设为大于1的值（如2）时，浏览器和Capacitor应用的表现都正常。

测试用完整HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <base href="/" />
    <meta name="viewport" content="user-scalable=no, width=500px, initial-scale=0.3, minimum-scale=0.1, maximum-scale=10" />
</head>
<body>
    <div style="width: 500px; background: red">500px wide</div>
    <div style="width: 100dvw; background: purple">100dvw</div>
    <div style="width: 200px; background: green">200px wide</div>
    <div style="width: 100px; background: blue">100px wide</div>
    <div style="font-size: 10em">HELLO WORLD THIS IS SOME TEXT!</div>
</body>
</html>

出现这种差异的核心原因是Chrome浏览器与Capacitor依赖的Android WebView对viewport元标签的解析逻辑不同：

• Chrome会严格执行initial-scale和minimum-scale的设置，哪怕缩放后页面宽度小于设备视口宽度，也会按配置显示。
• Android WebView（Capacitor默认使用系统WebView组件）存在隐含限制：不会允许页面缩放后内容宽度小于设备实际视口宽度。当你设置width=500px且initial-scale<1时，如果设备视口宽度大于500px，WebView会自动忽略缩放配置，强制让页面适配设备视口，导致无法缩小。

而当initial-scale>1时，页面被放大后内容宽度超过设备视口，WebView的这个限制不会触发，所以两者表现一致。

如果需要强制按配置的缩放比例显示，可以修改Capacitor的Android端WebView设置：
在Android项目的MainActivity.java中，获取WebView实例后添加以下配置，禁用WebView的自动适配行为：

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

这两个属性默认是true，会让WebView自动缩放页面以适配视口宽度，禁用后就能严格遵循viewport元标签的设置。

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