Make webview in a tablet simulate a small device

Question

I have a mobile website that is very well suited for small devices, like smartphones, but it doesn't look good on a tablet.

I am using a webview to display the website. This webview occupies all of the screen area. Is there any way I can make the webview simulate a small device?

I didn't quite get from the docs what combination of options (getLoadWithOverviewMode, setUseWideViewPort, setDefaultZoom) will make me achieve what I want. Any help will be appreciated.

Obs: I already tried setting the text zoom (setTextZoom(int)). It got a little better, but not as good as on the smartphone.

Obs2: I cannot change the website. :(

UPDATE:

If I change the webview width to 720 px, the html page changes to the mobile layout and displays nicely. Now I want to do this but keeping the webview with full width. Like tricking the html page to think that the webview width is smaller than it really is.

Obs: Zoom is not working. The html page doesn't have it enabled. And I think its not a good way, since zoom doesn't change the perceived webview size.

Answer 1

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 size
Display 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 is
float amplification_ratio = (float) 0.20;

// Shrink webview size
ViewGroup.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.