CODEWITHSUNDEEP
androidweb-applicationsandroid-webviewviewport
Arthur
Arthur

Reputation: 1443

WebView in Android 4.4 and initial-scale

I've been banging my head against the wall for the whole day now, and i need some help :(

The problem is, that i have a WebApp that was designed for 640x960.

We didn't have time to write css for each screen size, so i've used initial-scale, maximum-scale, minimum-scale in the viewport meta tag to scale the app to different screen sizes.

The problem is, that in Android 4.4, no matter what i do, it always scales the app up, but never down!

I mean if i use a value of 0.7, the app is scaled up. If i use a value of 1.3, it is scaled up again :/

I've tried to change the targetSdkVersion to different versions to get the old behavior, but with no luck.

Can someone help me?

UPDATE: So i ended up using style="zoom: <value>%" on the body tag. I calculate the percentage based on the difference between the current device screen size and the resolution my app was designed for. Now everything fits.

Upvotes: 3

Views: 11000

Answers (2)

Matt Gaunt
Matt Gaunt

Reputation: 9821

Just had a run through of this after not quite being sure of the answer myself.

http://www.gauntface.co.uk/blog/2013/11/29/desktop-site-and-the-viewport/

You want a viewport without an initial-scale if you only want the webpage to fit the WebView's width.

Things that will affect the WebView:

  1. Ensure you have setUseWideViewport() enabled so the page can be larger than the devices width: http://developer.android.com/reference/android/webkit/WebSettings.html#setUseWideViewPort(boolean)
  2. Ensure you targetSDKVersion=19 to ensure you aren't getting any compatibilities for the old webview

If you want to prevent the user from zooming in or out, use user-scalable=no in the viewport rather than set a min and max.

Upvotes: 2

marcin.kosiba
marcin.kosiba

Reputation: 3231

A viewport of

<meta name="viewport" content="width=640, initial-scale=1">

should make your fixed layout always fit (see MDN for more on the viewport meta tag).

You could be bumping in some of the following:

  • the contents can't be scaled down more than 'overview scale' (that is, such that your content is narrower than the screen). This is by design - making it smaller only results in rendering white to the sides so why bother. If you want this behaviour you'd need to add padding to the content,
  • you've specified the layout height of the WebView to be WRAP_CONTENT - this makes the WebView ignore the viewport meta tag, don't do that - set it to MATCH_PARENT or a fixed size,
  • you're using certain WebSettings:
    • setUseWideViewport (which overrides the viewport meta tag) or
    • setInitialScale (which can alter the size of the viewport).

The best way to check if it's the content's fault or the WebView's fault is to see if the page works in Chrome on Android:

  1. if it works in Chrome on Android but not in the WebView then set targetSdkVersion to 19 and try disabling WebSettings, changing your layout to fixed size, etc.. to see what's causing the problem. Maybe start from the other end - by making a super trivial WebView app that just loads the page - confirm that works and then slowly introduce changes to see which one causes the problem,
  2. if it doesn't work in Chrome on Android then problem is the difference in viewport meta tag support between pre-KK WebView and Chrome on Android - this means you'll have to fix your content,

If you're still stuck post a zip that contains sources with a repro (doesn't have to be the full app, just the minimum to demonstrate the problem) and I can try and help you more from there.

Upvotes: 8

Related Questions