Android WebView y consultas de medios CSS

Tengo una página web básica que responde correctamente al tamaño de la pantalla y los cambios de orientación (utilizando consultas de medios CSS) cuando se muestra en Chrome en una tableta Android (Nexus 7). Cuando muestro la misma página en un WebView, las consultas de medios basadas en el ancho de la pantalla no funcionan. Aquí es cómo estoy configurando el 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"); 

El WebView detecta correctamente los cambios de orientación, en función del comportamiento de las siguientes consultas de medios:

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

Las consultas de medios que usan dimensiones de pantalla no funcionan correctamente, ya que, de acuerdo con el siguiente JavaScript, el ancho y la altura de la pantalla permanecen constantes a través de los cambios de orientación:

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

Activar el código anterior con un evento "orientationchange". Cuando se ejecuta en Chrome en Android, los valores de anchura y altura se muestran correctamente, teniendo en cuenta la orientación del dispositivo. Cuando se ejecuta dentro del WebView, el ancho y la altura permanecen constantes, independientemente de la orientación.

¿Hay alguna configuración que necesito aplicar al WebView para obtener el comportamiento esperado?

Intente mirar window.innerWidth y window.innerHeight en su javascript.

Necesita el ancho y la altura de los CONTENIDOS de WebView, después de cargar su HTML (después de cambiar la pantalla, o cualquier cambio). SÍ usted hace, pero no hay método getContentWidth (solamente un valor del puerto de la visión), Y el getContentHeight () es inexacto!

Respuesta: sub-clase 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 //========= 

Cuando se trata de pantallas modernas que necesita para especificar la relación de píxeles. Un píxel en términos CSS es una medida, no un píxel real. Los tamaños de píxeles difieren desde pantallas de alta resolución y pantalla de retina. Los fabricantes tratan de mostrar basados ​​en píxeles como un tamaño, pero no funciona con las consultas de medios correctamente. Necesita hacer la consulta multimedia de esta manera:

 @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 } 
FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.