Android WebView and CSS media queries

Question

I have a basic web page that responds correctly to screen size and orientation changes (using CSS media queries) when displayed in Chrome on an Android tablet (Nexus 7). When I display the same page in a WebView, the media queries based on screen width do not work. Here's how I'm setting up the 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");

The WebView correctly detects orientation changes, based on the behavior of the following media queries:

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

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

Media queries using screen dimensions do not work correctly, because, according to the following JavaScript, the screen width and height remain constant through orientation changes:

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

I trigger the previous code with an "orientationchange" event. When running in Chrome on Android, the width and height values are displayed correctly, taking device orientation into account. When running inside the WebView, the width and height remain constant, regardless of orientation.

Is there some configuration I need to apply to the WebView to get the expected behavior?

Answer 1

Try looking at window.innerWidth & window.innerHeight in your javascript.

Answer 2

You need the width and height of the WebView CONTENTS, after you loaded your HTML (after screen change, or any change). YES you do, but there is no getContentWidth method (only a view port value), AND the getContentHeight() is inaccurate !

Answer: sub-class 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
//=========

Answer 3

When it comes to modern screens you need to specify pixel ratio. A pixel in CSS terms is a measurement, not an actual pixel. Pixel sizes differ since high res screens and retina display. Manufacturers try and display based on pixel as a size but it is does not work with media queries properly. You need to do the media query like this:

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