Android WebView像素映射问题：JS像素与屏幕像素不匹配

我明白你想要实现的是让WebView里的HTML元素像素和设备物理像素完全对应，避免自动缩放导致的显示偏差。你遇到的核心问题是WebView默认会根据设备的像素密度（DPI）对页面进行缩放，再加上代码里的几处配置错误，才导致400px的div在800px宽的设备上显示异常。下面是一步步的解决方案：

一、修正WebView的核心配置 #

首先要调整Java层的WebView设置，关闭自动缩放相关功能，确保WebView以实际像素渲染页面：

myWebView = new WebView(this);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

// 关键改动：关闭宽视口适配和概览模式，这两个会强制页面缩放
webSettings.setUseWideViewPort(false); // 原代码为true，需改为false
webSettings.setLoadWithOverviewMode(false); // 原代码为true，需改为false

// 彻底禁用缩放功能
webSettings.setBuiltInZoomControls(false);
webSettings.setSupportZoom(false); // 新增：禁止页面缩放
if (android.os.Build.VERSION.SDK_INT >= 11) {
    webSettings.setDisplayZoomControls(false);
}

// 强制初始缩放为100%（注意：setInitialScale参数是百分比，原代码的1代表1%，这是核心错误！）
webSettings.setInitialScale(100);
webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);

myWebView.requestFocus(View.FOCUS_DOWN);
myWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

二、修改HTML的Viewport元标签 #

调整index.html里的viewport，明确锁定页面缩放比例，指定宽度为设备实际像素：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- 关键：锁定缩放比例，禁止用户缩放，确保宽度匹配设备像素 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title></title>
</head>
<!-- 移除body默认的margin和padding，避免影响元素位置 -->
<body id="body" style="background: #000000; margin: 0; padding: 0;">
<div style="display:block;width:400px;height:240px;position:absolute;border:1px solid #ff0000;background:#ffff00;z-index:10000000"></div>
</body>
</html>

三、（可选）传递屏幕像素到JS实现动态适配 #

如果你需要在JS里动态使用屏幕尺寸，可以通过addJavascriptInterface把设备实际像素传递给JS：

// 在WebView初始化后添加
myWebView.addJavascriptInterface(new Object() {
    @JavascriptInterface
    public int getScreenWidth() {
        DisplayMetrics displayMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        return displayMetrics.widthPixels;
    }

    @JavascriptInterface
    public int getScreenHeight() {
        DisplayMetrics displayMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        return displayMetrics.heightPixels;
    }
}, "AndroidDevice");

之后在JS里就能直接调用获取屏幕尺寸：

const screenWidth = AndroidDevice.getScreenWidth();
// 比如动态设置元素为屏幕一半宽度
document.querySelector('div').style.width = `${screenWidth / 2}px`;

四、验证效果 #

完成以上修改后，在800px×480px的测试设备上，400px宽的div应该刚好占据屏幕左半部分，实现JS像素与WebView屏幕像素1:1的精准映射。这套配置也能适配不同DPI的设备，保证每个设备上的像素都对应实际物理像素。

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