1

Possible Duplicate:
WebView: how to preserve the user's zoom settings across sessions?

I'm developing a simple android app, which loads an initial URL inside my WebView, then the user is free to zoom in/out and navigate.

When the user taps on a link, the "zoom level" is lost (or reset) and the user has to zoom in/out again! This is frustrating users! I couldn't find how to save/preserve the current zoom. (I've tried using the onScaleChanged event, but it seems it is generated only after the user tapped)

I've solved using, inside onPageFinished:

@Override
public void onPageFinished(WebView webView, String url) {
webView.loadUrl("javascript:(function() { " +  
"document.getElementsByTagName('body')[0].style.zoom='" + yourzoomvariable + "'; })()");
}

Thank you very much for the help!

Community
  • 1
  • 1
MoreOver
  • 381
  • 1
  • 5
  • 17
  • Thank you, but I think it's different. I know how to store/retrieve the value, but I don't know when (in which Event) I can save the zoom. I've tried doing it inside onScaleChanged, but this event happens when the user tap on a link and change the page. I can't find how to change the zoom when the user already tapped a link. – MoreOver Sep 26 '12 at 09:02

1 Answers1

0

Do you have power over the html you are showing? you could adjust the scaling and zooming also inside the html with a meta tag inside the header:

for example:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5,  maximum-scale=2.0">

EDIT:

You could also inject that metatag on every load finished like below code for changing the background color to a gradient.

public void onPageFinished(WebView view, String url) {



            //styling



            webview.loadUrl("javascript:(function() { " +  
                    "document.getElementsByTagName('body')[0].style.background = '-webkit-gradient(linear, 0% 0%, 0% 100%, from(#143b8a), to(#266af3))'; " + 
                    "})()");  



        }

Also you could use the zoomin and zoomout values like explained here How to zoom in/out the content of a WebView programmatically? Then you could save there status and the user would have to adjust it only ones.

Community
  • 1
  • 1
SunnySonic
  • 1,318
  • 11
  • 37
  • I don't. :( I would like to detect any zoom change, store it and restore so the user doesn't have to do it manually. – MoreOver Sep 26 '12 at 08:51
  • Please see my edit above. and also the link mentioned by Phil before: http://stackoverflow.com/questions/2959833/webview-how-to-preserve-the-users-zoom-settings-across-sessions – SunnySonic Sep 26 '12 at 10:06
  • Thank you. How do I change zoom in javascript? I can detect scale change, using onScaleChanged, but this event is fired only after the user tapped on a link. So the new page is loaded with old zoom and I don't know how to change zoom to this new page loaded. Phil's link shows how to change zoom level, but for the next load url and not the current one. – MoreOver Sep 26 '12 at 10:55
  • you will first have to save the zoomlevel and then apply it again on every page load finished like i explained with the metatag and background color change above. you can execute anything you like in there. – SunnySonic Sep 26 '12 at 14:24
  • Thank you, I've done it using CSS. (I've added the code in my question). Anyway, my problem now, is that, after using it, the user can't zoom in/out anymore! Why? – MoreOver Sep 26 '12 at 16:32
  • That is not a good way in my opinion but should work as well. Is the zoom being applied though or nothing is happening and you cant zoom also? have you added these lines for your webview to support zoom? webview.getSettings().setBuiltInZoomControls(true); webview.getSettings().setSupportZoom(true); – SunnySonic Sep 27 '12 at 02:23
  • Hi, yes the zoom is working, but after I can't zoom in/out with pinch zoom anymore! You said this is not a good way, do you know a better way? Thank you. – MoreOver Sep 27 '12 at 13:24
  • you should try to either do it with webview controls or with css in your html. at the moment you are forcing a css zoom and with that probably deactivating the native webview zoom. Try to only do it either way. – SunnySonic Sep 27 '12 at 13:43
  • Well, I'd like to do it natively, but I can't find how to do so. Using javascript is causing webview native zoom to get disabled. – MoreOver Sep 27 '12 at 18:05
  • I've noticed that the problem is not that android disable the webview zoom, but aftr you've used JS to change the zoom, this value is set as MINIMUM zoom value! So you can use pinch to zoom only to increase the zoom, but not for decrease. Anybody knows the reason? – MoreOver Sep 27 '12 at 18:47
  • if you inject css for zooming you also have to inject the metatag for min and max zooming at the same time like i mentioned above. Did you consider one thing though. on different screen densities your same zoom level might result in a different thing. – SunnySonic Sep 27 '12 at 23:51
  • Yes, I'm considering it, infact I let the user choose the zoom level. I'd have to inject "minimum-scale=1", but I don't know how this option is called in javascript and I can't find it. – MoreOver Sep 28 '12 at 14:42
  • look here please: http://stackoverflow.com/questions/1900874/how-to-add-anything-in-head-through-jquery-javascript – SunnySonic Sep 28 '12 at 16:23
  • Hm no, it's not working. It seems that minimum-scale has no effect. I still can't zoom out. – MoreOver Sep 28 '12 at 20:16