Cordova缩放不遵循meta标签配置 禁止缩放设置在Android端失效如何解决

你当前使用的viewport标签语法没有基础错误，但Android 10及以上版本的系统级显示缩放优先级默认高于网页viewport配置，同时你额外添加的height=device-height属于已废弃属性，反而可能引发适配异常。

纯H5/网页场景解决方案 #

• 首先修正viewport标签，移除废弃属性：

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

• 新增全局CSS兜底规则，屏蔽系统字体、缩放对页面的影响：

:root {
  /* 固定根元素字体大小，避免系统字体缩放影响rem布局 */
  font-size: 16px !important;
}
html, body {
  /* 禁用双指缩放相关的触摸事件 */
  touch-action: pan-x pan-y !important;
  width: 100vw !important;
  overflow-x: hidden;
}

• 若需要适配国内厂商内置浏览器，可额外添加专属meta声明：

<meta name="x5-fullscreen" content="true">
<meta name="QAppFullScreen" content="true">

原生APP嵌套WebView场景解决方案 #

除了上述H5端的配置外，还需要在安卓原生代码中修改WebView配置：

• WebView初始化时添加如下配置：

WebSettings settings = webView.getSettings();
// 强制适配网页viewport设置，忽略系统dpi缩放
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(false);
// 固定初始缩放比例为100%
webView.setInitialScale(100);
// 禁用所有内置缩放功能
settings.setSupportZoom(false);
settings.setBuiltInZoomControls(false);
settings.setDisplayZoomControls(false);

• 在AndroidManifest.xml对应的Activity标签下添加属性，避免系统配置变更触发页面重绘缩放：

<activity
    android:name=".YourWebActivity"
    android:configChanges="orientation|screenSize|smallestScreenSize|screenLayout|density" />

验证注意事项 #

修改完成后需清空浏览器缓存或重新打包APP测试，部分定制安卓系统（如MIUI、ColorOS）自带独立的网页缩放开关，测试前需确认该开关已关闭。

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