7

我有一个基本网页,当在 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 应用一些配置才能获得预期的行为?

4

3 回答 3

0

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

于 2014-04-22T15:42:18.387 回答
0

加载 HTML 后(屏幕更改或任何更改后),您需要 WebView CONTENTS 的宽度和高度。是的,但是没有getContentWidth方法(只有一个视口值),并且getContentHeight () 不准确!

答:子类WebView:

/*
  Jon Goodwin
*/
package com.example.html2pdf;//your package

import android.content.Context;
import android.util.AttributeSet;
import android.webkit.WebView;

class CustomWebView extends WebView
{
    public int rawContentWidth   = 0;                         //unneeded
    public int rawContentHeight  = 0;                         //unneeded
    Context    mContext          = null;                      //unneeded

    public CustomWebView(Context context)                     //unused constructor
    {
        super(context);
        mContext = this.getContext();
    }   

    public CustomWebView(Context context, AttributeSet attrs) //inflate constructor
    {
        super(context,attrs);
        mContext = context;
    }

    public int getContentWidth()
    {
        int ret = super.computeHorizontalScrollRange();//working after load of page
        rawContentWidth = ret;
        return ret;
    }

    public int getContentHeight()
    {
        int ret = super.computeVerticalScrollRange(); //working after load of page
        rawContentHeight = ret;
        return ret;
    }
//=========
}//class
//=========
于 2016-07-24T21:23:53.207 回答
-1

对于现代屏幕,您需要指定像素比率。CSS 术语中的像素是测量值,而不是实际像素。由于高分辨率屏幕和视网膜显示,像素大小不同。制造商尝试根据像素作为大小进行显示,但它不适用于媒体查询。您需要像这样进行媒体查询:

@media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1) { 
      //CSS here
}
于 2013-04-04T20:09:28.757 回答