Android WebView 和 CSS 媒体查询

Question

我有一个基本网页，当在 Android 平板电脑 (Nexus 7) 上的 Chrome 中显示时，它可以正确响应屏幕尺寸和方向变化(使用 CSS 媒体查询)。当我在 WebView 中显示同一页面时，基于屏幕宽度的媒体查询不起作用。以下是我设置 WebView 的方式:

WebView webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.loadUrl("http://10.0.1.8:8080/cbc/test");

WebView 根据以下媒体查询的行为正确检测方向变化:

@media only screen and (orientation: portrait) {
    .landscape { display: none; }
}

@media only screen and (orientation: landscape) {
    .portrait { display: none; }
}

使用屏幕尺寸的媒体查询无法正常工作，因为根据以下 JavaScript，屏幕宽度和高度在方向更改时保持不变:

    $("#dimensions").empty();
    $("#dimensions").append($("<div>Width: " + screen.width + "</div>"));
    $("#dimensions").append($("<div>Height: " + screen.height + "</div>"));
    $("#dimensions").append($("<div>Depth: " + screen.pixelDepth + "</div>"));

我用“orientationchange”事件触发前面的代码。在 Android 上的 Chrome 中运行时，宽度和高度值会正确显示，并考虑到设备方向。在 WebView 内部运行时，无论方向如何，宽度和高度都保持不变。

是否需要对 WebView 应用一些配置才能获得预期的行为？

Answer 1

尝试在您的 javascript 中查看 window.innerWidth 和 window.innerHeight。