Запросы мультимедиа для Android WebView и CSS

У меня есть базовая веб-страница, которая правильно реагирует на размер экрана и изменения ориентации (с использованием мультимедийных запросов CSS) при отображении в Chrome на планшете Android (Nexus 7). Когда я показываю одну и ту же страницу в 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>")); 

Я запускаю предыдущий код с событием «changechange». При работе в Chrome на Android значения ширины и высоты отображаются правильно, учитывая учет ориентации устройства. При работе внутри WebView ширина и высота остаются неизменными независимо от ориентации.

Есть ли какая-то конфигурация, которую мне нужно применить к WebView, чтобы получить ожидаемое поведение?

Solutions Collecting From Web of "Запросы мультимедиа для Android WebView и CSS"

Попробуйте посмотреть на window.innerWidth & window.innerHeight в вашем javascript.

Вам нужна ширина и высота WebView CONTENTS после загрузки вашего HTML (после изменения экрана или любых изменений). ДА, но нет метода 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 //========= 

Когда дело доходит до современных экранов, вам нужно указать соотношение пикселей. Пиксель в терминах 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 }