Restrict zoom in webview app

Issue

I have a simple Android WebView app that does very little except load a URL and display it and its links within the app.

Via CSS, I've set the webpage to be 720px x 1280px to (theoretically) fill the screen of a Galaxy S3 completely.

Within the WebView's java code, I've tried to make it to where the page cannot be zoomed in or out, and displays fullscreen, with the following code:

requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
mWebView.getSettings().setSupportZoom(false);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(true);

I've verified that the webpage is the right size (720 x 1280) using a CSS ruler I built, but as you can see, the webview app doesn't display it at that scale when it loads:

I can also double-tap on the screen and it does zoom in, even though I thought I disabled zoom in the java code. Even then, it doesn't zoom to 100%...it zooms more than that:

So basically, how do I manipulate webview to actually show my page at its desired size, without allowing the user to change that scale?

Solution

You need to use the meta viewport tag in your html to initially scale the content to the device size. You can also disable zoom using this tag.

Add this in the head of your html document:

<meta name="viewport" content="width=device-width, user-scalable=no">

Further reading: MDN - Viewport meta tag

Answered By - Steve Sanders