小编Tom*_*rry的帖子

我有一个基本的网页,当在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以获得预期的行为？