Android WebView i zapytania o media CSS

Question

Mam podstawową stronę internetową, która poprawnie reaguje na zmiany rozmiaru i orientacji ekranu (przy użyciu zapytań o media CSS) wyświetlanych w przeglądarce Chrome na tablecie z Androidem (Nexus 7). Kiedy wyświetlam tę samą stronę w WebView, zapytania o media oparte na szerokości ekranu nie działają. Oto jak ja konfigurowania 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 poprawnie wykrywa zmiany orientacji w oparciu o zachowanie następujących zapytań mediów:

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

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

mediów zapytań za pomocą wymiarów ekranu nie działają poprawnie , ponieważ, zgodnie z następującym JavaScript, szerokość i wysokość ekranu pozostają stałe poprzez zmiany orientacji:

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

i wywołać poprzednią współpracy de ze zdarzeniem "orientationchange". Podczas uruchamiania w Chrome na Androida wartości szerokości i wysokości są wyświetlane poprawnie, biorąc pod uwagę orientację urządzenia. Podczas pracy w WebView szerokość i wysokość pozostają stałe, niezależnie od orientacji.

Czy jest jakaś konfiguracja, którą muszę zastosować do WebView, aby uzyskać oczekiwane zachowanie?

Answer 1

Jeśli chodzi o nowoczesne ekrany, należy określić stosunek pikseli. Piksel w kategoriach CSS jest miarą, a nie rzeczywistym pikselem. Rozmiary pikseli różnią się od ekranów o wysokiej rozdzielczości i wyświetlacza siatkówki. Producenci próbują i wyświetlają w oparciu o piksel jako rozmiar, ale nie działa poprawnie z zapytaniami o media. Trzeba zrobić kwerendę mediów tak:

@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

spróbuj poszukać w window.innerWidth & window.innerHeight w JavaScript.

Answer 3

Potrzebujesz szerokości i wysokości SPIS TREŚCI WebView, po załadowaniu HTML (po zmianie ekranu lub jakiejkolwiek zmianie). TAK, ale nie ma metody getContentWidth (tylko wartość portu widoku), ORAZ getContentHeight() jest niedokładna!

Odpowiedź: podklasa 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 
//=========