Develop Reference

Android webview : dezoom to fit content

I have an html content with a mandatory fixed size (let's say 500px).
If the screen is large enough, I center the content.
However, if the width is less than 500px, I have to unzoom to have all the content. I guess I have to change the viewport in the html, but all my tries have failed.
Note: In every case, the user can zoom.
Do you have an idea how to achieve this?
Thanks.

The solution I have used is simply to call this method :
webView.setInitialScale(xxx)
When the scale is 100, it means no zoom.

Disable WebView zoom out but keep zoom in enabled

I'm using WebView to show some html content with different width. Initial scale is set up to show all page content. without horizontal scroll. This code is used:
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setLoadWithOverviewMode(true);
Now I want to forbid zoom out but keep zoom in enabled. Can anyone help to find the way?
UPD:
Some additional explanations.
I want to limit minimum scale for webView. For example, If scale=0.67 make page to fit the width of WebView I want to forbid user set scale less then 0.67, but keep the possibility to set scale greater than 0.67. Main problem here is that displaying content has different width and therefore minimal scale is different for different pages.

I can tell you that what you are trying to achieve is a Bad UX. Zoom in and Zoom out are related to each other. If the user zoomed in by mistake, and found out that you are preventing him from zooming out. Expect disappointment and maybe 1 star on the market.
Even the WebView does not allow you to enable one and disable the other.
But if you really want to do that, then you need to implement the gesture by yourself and calculate the difference between the figures. If the difference is getting bigger (ZoomIn) otherwise (ZoomOut)
This link will help you implement the Zoom Gesture

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.

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.

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:
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)
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.

How to get WebView to wrap an image exactly

I am using a WebView to display some maps in my app using the Google Static Maps API. However, when I load a map into my WebView, it's always either zoomed out too far (showing a massive amount of white space around the map) or too close (showing only part of the map). Given that I'm requesting a map of the same size as the size of my WebView, I should be able to "tightly" wrap with no issues, but I'm not sure how to achieve that.
I've tried just running at the default settings, and that results in the map being zoomed in too far (and scrollbars being displayed). I've also tried this:
mapView.getSettings().setLoadWithOverviewMode(true);
mapView.getSettings().setUseWideViewPort(true);
which just results in the page being fully zoomed out. Are there other alternatives I'm missing other than futzing around with the scale?

I had similar problem with the whitespace. What I did was to go into the CSS file for the WebView and edited the margin/padding on the image I was displaying to be negative (I just edited until I was happy) so it would display completely in the upper left corner.
Then I set the height and width of the webView in my Android XML file until I was happy with the result. However I was having a bit of a problem with the width showing some white space on some devices but the height was good once I had found the right value.
My solution to this was to try to set the width as the same as the height in the java.class file for the activity but I was not successful, maybe you will have more luck.
In the end I abandoned the webView for my project so I can't really give you any working code.

Android webview links misaligned using sprite images

I have a very weird problem that is not consistent. I have a header in my webview page that is regular html from my site. The images are linked to pages. Sometimes the links don't work and sometimes they do. If I move my finger below the image, sometimes you see the rectangular highlight press color box show up but way off from the actual image. It will just be in a random spot but always below the image somewhere. So the link href and the image are getting out of sync per say. If I reload the page it will be in the correct position again and the image/button works. It doesn't always happen. Works fine in desktop and mobile browsers. Just weird in webview. Anyway, have a suggestion or experience this and why its so random?

Use it like this
String s="<head><meta name=viewport content=target-densitydpi=medium-dpi, width=device-width/></head>";
webview.loadDataWithBaseURL(null,s+htmlContent,"text/html" , "utf-8",null);
For more reference
http://developer.android.com/guide/webapps/targeting.html
And in Samsung s3 like phones, sometimes this will not work .For that create a separate layout for xhdpi phones and change the webview's height to 40dp or something depending on your requirement for avoiding white space.

The problem wasn't with just webview it is mobile in general, specifically Android Browser which I believe webview uses. My header was position:fixed and after a lot of research I found that position:fixed is glitchy on mobile and causes weird things to happen. This was causing the clickable location of the links getting out of place when you scrolled even though the images never moved. So when you clicked on the image/link it didn't work because the location of the link was somewhere else on the page, usually under the image somewhere.
As noted on this blog solution which described my issue.
http://suratpyari.wordpress.com/2011/09/30/fixed-position-problem-with-android-webkit/
However the solution I went with was not to use position:fixed at all as I didn't want css hacks and to use the solution used at the SO link below using position:absolute to make the inner div scrollable. It actually works quite well and the scrolling is even more smooth and fluid now.
CSS 100% Height, and then Scroll DIV not page
So anyone else that may have this problem, it might be your fixed header. And it is "real" problem for the person who down voted my question. :/