How can I enable zoom in on UIWebView which inside the UIScrollView?

Question

I have a UIWebView which inside a UIScrollView (scrollview contain another component)

I tried to enable multitouch both on Interface Builder or Programmatic on UIWebView but it still cannot zoom for html, do I need to handle both zoom in at the UIScrollView and UIWebView? Or anything I haven't to set?

`scalesPageToFit = YES` it works but it change your default content size, [Look at my answer this will helpful for you.](http://stackoverflow.com/questions/7134576/enable-zooming-pinch-on-uiwebview/23971234#23971234) — iPatel, Jul 22 '14 at 03:18

score 349 · Accepted Answer · answered May 29 '10 at 20:46

349

You MUST set scalesPageToFit=YES for any pinching and zooming to work on a UIWebView

answered May 29 '10 at 20:46

john geshrick

3,506
1
16
3

2

This is good, except now my page is being scaled down to fit within the view. I am creating an html page in code to display, and I want it to remain at the previous size, but allow my users to zoom in with pinch zooming – Dan F May 09 '11 at 18:50
33

Add the following meta tag to your HTML document's head: – vocaro May 16 '11 at 06:22
2

How can I do the same thing with an external website? That is, I set the initial zoom, and user zooming is enabled after that. – William Jockusch Nov 06 '11 at 19:17
Hi, It all working fine Paging, ZoomIn/Out, etc... But I have one issue in that. My app working in both orientation (Portrait & Landscape). Now, in portrait, I have to swipe the page 2-3 times then I am able to go next page. But in landscape, it's working fine. I have take webview inside scrollview and scrollview have paging. But when I tried to swipe the scroll to go to next page, then I have to swipe it 2 to 3 times for go to next page (in portrait mode). Any idea regarding same. Thanks for the help. – Nishant B Feb 14 '12 at 07:18
Work's but this cause problems with other things.. for example http://stackoverflow.com/questions/33617217/uiwebview-problems-with-scale-and-scalespagetofit – jose920405 Nov 09 '15 at 22:04

score 12 · Answer 2 · answered Jun 23 '11 at 05:34

OK, you need to do both the above, but also the following. I had a web view in the main view, and that didn't work.

As above, you first have to put a UIScrollView in the main view, then put the web view in the scroll view.
As above, implement <UIScrollViewDelegate> in your view controller, drag the scroll view delegate to the view controller in Interface Builder, and implement the viewForZoomingInScrollView method. This must return the pointer to the UIScrollView (return myScrollView).
I created IBOutlet properties for both the web view and the scroll view - link them in the NIB to your view controller.
On the Scroll View, go to the Attributes Inspector, set your Max and Min zoom factors (I set 0.5 to 5.0, that works well).
On the Web View, in the Attributes Inspector:
In the Web View section, select Scales Pages To Fit
In the View section, select for Mode, "Top Left"
In the View section at the bottom, check off User Interaction Enabled, and Multiple Touch Enabled

score 3 · Answer 3 · answered Sep 11 '11 at 21:51

With JavaScript you can control the zoom level, although the oly solution I have found doesn't look smooth.

Say you have in <head>:

<meta id="vp" name="viewport" content="width=768,initial-scale=1.0">

To zoom to 4x, and still allow the user to change zoom, change the content twice:

var vp = document.getElementById('vp');
vp.content = "width=767,minimum-scale=4.0,maximum-scale=4.0,user-scalable=yes";
vp.content = "width=768,minimum-scale=0.25,maximum-scale=10.0,user-scalable=yes";

Toggling the width is very important - otherwise Mobile Safari has serious repainting bugs (due to over-optimisation).

You cannot just set initial-scale again - it is ignored the second time.

score 2 · Answer 4 · answered Apr 09 '10 at 22:18

You need to implement the viewForZoomingInScrollView method in your controller, or zooming won't do anything. (I don't really know why this should be needed, but there you go.)

For detailed information, see http://developer.apple.com/iphone/library/documentation/WindowsViews/Conceptual/UIScrollView_pg/ZoomZoom/ZoomZoom.html.

How can I enable zoom in on UIWebView which inside the UIScrollView?

4 Answers4

Linked