Android WebViewとCSSメディアクエリ

Question

Androidタブレット（Nexus 7）のChromeに表示されるときに、画面サイズと向きの変更（CSSメディアクエリを使用）に正しく応答する基本的なWebページがあります。 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>")); 

私は以前の共同「方向転換」イベントを伴うde。 AndroidでChromeで実行している場合、デバイスの向きを考慮して、幅と高さの値が正しく表示されます。 WebViewの内部で実行している場合、幅と高さは方向に関係なく一定です。

予想される動作を得るためにWebViewに適用する必要のある設定がありますか？

Answer 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 
} 

Answer 2

あなたのJavaScriptでwindow.innerWidth & window.innerHeightを見てみてください。

Answer 3

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 
//=========