CODEWITHSUNDEEP
androidcssandroid-webview
hannebaumsaway
hannebaumsaway

Reputation: 2734

Restrict zoom in webview app

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:

enter image description here

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:

enter image description here

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

Upvotes: 1

Views: 620

Answers (1)

Steve Sanders
Steve Sanders

Reputation: 8651

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

Upvotes: 3

Related Questions