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.

Android Webview how do you set it to be 100% zoomed in?

I'm using Anddown to convert some markdown text to html and I want to display the html in a webview. The webview is part of a fragment that takes up around half the screen on a tablet in landscape.
I want the html to appear at 'normal' scale, as in I never want it zoomed out so you can see the whole page. Most of the time this is fine since text in blocks wraps when it reaches the end of the view. But some of the markdown elements result in an html element which stretches the view horizontally, so I've got something that looks like this:
----
----
----
--------------
----
(imagine the dashes are text, the short lines are wrapping correctly to the fragment width)
When I load that to the webview, the page is zoomed out fully so that that long horizontal line fits the width of my view. I don't want this, I want the webview to always be zoomed in. The weird thing is that sometimes when I load the html to the webview, it will automatically zoom in to what I want (but with some horizontal overflow). This doesn't happen every time and when it does, I can see the zoomed out version for a split second before it resizes.
So my question is, how do I get it to default to 'zoomed in' always? I don't care if it means there's some horizontal overflow, I just want the text to be 100% in scale (if that even makes sense).

For normal scale you should use this viewport tag (on your html's header):
<meta name="viewport" content="initial-scale=1, maximum-scale=1,minimum-scale=1">
Now, if you want different scale you can change these settings (for example use a scale of 2)
Hope that answers your qauestion

If you're using text.
Have you tried using
word-wrap:break-word;
So the text won't be outside it's parent

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.

Viewport metatag in WebView not scaling the contents properly in Android

I have a WebView inside a ScrollView. This is my first requirement as there will be other elements also inside the ScrollView. I want the WebView to fit the content in the device-width available. For this I am using viewport meta tag as shown below.
<meta name=\"viewport\" content=\"target-densitydpi=device-dpi, initial-scale=1, width=device-width\" />
WebView's height is set to Wrap_Content. I am loading the WebView on button click using loadDataWithBaseURL() method. Now the problem is that it is causing the content below the WebView flicker and the WebView content is not sizing properly. It sometimes leave the space below the WebView content. When I remove the metag tag, WebView content loads with desired size but doesn't fit in the viewport.
Any suggestions?

This is probably caused by the fact that the WebView processes the viewport meta-tag asynchronously. This means that for a brief moment the WebView uses a default viewport (320 px wide) and if your content is sufficiently complex it might be possible for the first layout pass to occur while the default viewport is still in effect.
I've never tried this but you could make the content of the page not display (something like style="display: none") until the viewport tag has been processed (window.onload should be sufficient).

How to allow Zoom-Out until an image fills a Webview and doesn't exceeed its boundaries?

I'm using a common approach to display an image in Full-screen and support zooming by a WebView and enablling zoom controls in it, my problem is when the Image width is larger than the Screen width
e.g. on Galaxy S2 screen (480px width) if I display a 600px by 600px image in a web view, the max Zoom-out still crops the image and displays a horizontal scroll, and there's no way to zoom-out (i.e. less than 100%).
Is there a solution for this to enable the zoom to go to levels such as 50% or if there's a better approach than using the WebView and still support zoom ?

for stretching/resizing the image to fit device screen (width) you have to load an HTML code in your webview which includes a <img> tag and we will set its width to 100%. and load that code in webview using loadDataWithBaseURL() method
try this
webView.loadDataWithBaseURL(null,"<!DOCTYPE html><html><body style = \"text-align:center\"><img style=\"border-style:dotted;border-width:5px;border-color:black;\" src= "www.myUrl.com/blahbla.jpg" alt=\"page Not Found\"></body></html>","text/html", "UTF-8",null);