Make webview in a tablet simulate a small device

Update: If you have a newer API (> 18) you may want to take a look at the note at the end of this question.

After struggling for quite a bit I found the solution!

The solution was not on zoomming. The zoom wasn't enabled for the html page and it didn't affect the size perceived by the html.

I got it by lowering the width of the webview:

ViewGroup.LayoutParams webviewLayoutParameters = mWebView.getLayoutParams();webviewLayoutParameters.width = (int) (760);webviewLayoutParameters.height =(int) (webviewHeight);mWebView.setLayoutParams(webviewLayoutParameters);

Then, as the page had a style that changed for screen sizes lower than 768px, it started to look different. Much better.

But then I wanted to enlarge that small webview so it could fit on the whole screen. For that I used scaleX and scaleY.

This is my complete commented solution:

// First, get the current screen sizeDisplay display = getWindowManager().getDefaultDisplay();Point size = new Point();display.getSize(size);int displayWidth = size.x;int displayHeight = size.y;//Then, set the amount you want to make your screen smaller. This means that it will comunicate to the HTML that its 20% smaller than it really isfloat amplification_ratio = (float) 0.20;// Shrink webview sizeViewGroup.LayoutParams webviewLayoutParameters = mWebView.getLayoutParams();webviewLayoutParameters.width = (int) (displayWidth*(1-amplification_ratio));webviewLayoutParameters.height =(int) (displayHeight*(1-amplification_ratio));mWebView.setLayoutParams(webviewLayoutParameters);// Now scale it the inverse ammount so it will take the full screen.mWebView.setScaleX(1/(1 - amplification_ratio));mWebView.setScaleY(1/(1 - amplification_ratio));

It worked pretty well. I managed to scale it in a way that changes the screen size. The shrinking and scaling will make the image quality a little lower, but its not a big deal.

Obs: The HTML page was made in bootstrap and only had classes for bootstrap's -xs devices. So I had to simulate the screen was smaller than 768px.

Obs2 (update): Naming this procedure

I implemented this on my app, tested it (model and integration), and its now live in production. To create the functions and variables, I had to name this procedure. What this does is like increasing the size of a webview pixel. In this way, the webview will still take thw whole screen, but it will have a width, in pixels, that is smaller.

With that in mind, any name like pixelEnlargementFactor, pixelMagnificationRatio or pixelSizeMultiplicator will be a good name.

UPDATE:

WARNING: Use the method above only in specific cases!

I had an old API version (15) and Had a RelativeLayout with many options. Back then, the setInitialScale(120) didn't work as I wanted.

Now I've changed my API to 19 and my layout to a simpler FrameLayout with fewer options. Now the setInitialScale(120) command along with mWebView.getSettings().setUseWideViewPort(false) did all what I achieved before with much less code.