Android WebView 및 CSS 미디어 쿼리

Question

Android 태블릿 (Nexus 7)의 Chrome에 표시 될 때 CSS 미디어 쿼리를 사용하여 화면 크기 및 방향 변경에 올바르게 응답하는 기본 웹 페이지가 있습니다. 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"); 

웹보기가 올바르게 다음 미디어 쿼리의 동작에 따라 방향 변경 감지 : 제대로 작동하지 않습니다 화면 크기를 사용하여

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

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

미디어 쿼리를 다음 자바 스크립트에 따르면 방향 변경을 통해 화면 너비와 높이가 일정하게 유지되기 때문입니다.

$("#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

이 자바 스크립트 window.innerWidth & window.innerHeight보고보십시오.

Answer 3

HTML을로드 한 후 (화면 변경 후 또는 변경 사항) WebView CONTENTS의 너비와 높이가 필요합니다. 예,하지만 getContentWidth 메서드 (보기 포트 값만 해당), 및 getContentHeight()은 정확하지 않습니다.

답 : 서브 클래스 웹보기 :

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