WebView in Android 4.4 and initial-scale
android, android-webview, viewport, web-applications
Solution
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:
- 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,
- 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.
Problem
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.