UIWebView - Does not resize content on rotation change?

Question

So I have a UIWebView that displays static html content.

When I start the ViewController in portrait and switch to landscape, it resizes the content correctly.

But, when I start the page in landscape and switch to portrait, it doesn't resize my content, and scrolling is required in order to view all the content.

Is this a bug? Is there a solution to force resizing the content of a UIWebView?

See http://stackoverflow.com/questions/6007904/uiwebview-donest-resize-correctly-when-orientation-change — buley, Aug 16 '14 at 02:18

score 10 · Accepted Answer · answered Mar 06 '12 at 00:42

10

You have 2 options:
Add this into HEAD section of your html file:

<meta name="viewport" content="width=device-width" />

Or call [myWebView reload] when orientation changes

answered Mar 06 '12 at 00:42

Sergey Kuryanov

6,114
30
52

I have already tried the first option, and it still leaves about 5 scrolling pixels which I don't like. I'm gonna try the second solution tomorrow, if that doesn't cause the webView to blink while reloading, it would be an acceptable solution. Thanks – aryaxt Mar 06 '12 at 01:54
"when orientation changes" how? – May 19 '20 at 18:57

score 3 · Answer 2 · answered May 13 '18 at 21:54

I tried the other suggestions above but they were not working the my static webpage I had loaded. I tried adding this line into the header of my webpage

<meta name="viewport" content="width=device-width" />

But it still didn't resize the page width after changing the orientation between landscape & portrait on my device. I then added this line to func viewDidLoad() and it worked perfectly. I'm running iOS 11.4

myWebView.autoresizingMask = UIViewAutoresizing.flexibleWidth

if the app starts in landscape mode and then orientation changes to portrait mode. the webview does not resize. — Raj, Jun 27 '18 at 05:33

score 3 · Answer 3 · answered Mar 18 '12 at 02:43

I had a similar problem. I solved it by executing javascript code to generate an event that updates the orientation of the page when the UIViewController finished rotation:

- (void) didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
    [webView stringByEvaluatingJavaScriptFromString:@"var e = document.createEvent('Events'); "
                                                    @"e.initEvent('orientationchange', true, false);"
                                                    @"document.dispatchEvent(e); "];
}

score 2 · Answer 4 · answered Mar 25 '13 at 22:19

2

This question is old, but this should solve it:

myWebView.scalesPageToFit = YES;

Alternately, if you're using the Interface Builder, you can tick the check box under Attributes Inspector that says 'Sales page to fit.'

Hope it helps.

answered Mar 25 '13 at 22:19

Vinod Vishwanath

5,821
2
26
40

Thank you sir! Didn't realize the solution was that straight-forward. – Stephen Paul Apr 07 '16 at 23:00

score 0 · Answer 5 · edited May 23 '17 at 12:02

I ended up using @Sergey Kuryanov's second approach since the first one did not work for me. I was using UIWebView's loadHTMLString method so you will see that in the code but you can replace it with whatever method you are using to load data in the UIWebView.

The first thing to do was to subscribe to rotation notifications. To do that I followed @clearwater82's answer on the matter in this question: How to detect rotation for a programatically generated UIView
I rewrote his answer for Swift 3, you can find it in the same page.

Once that was done it was easy to reload the data in the UIWebView using loadHTMLString. My approach was to wrap the UIWebView inside a custom view so I could also handle some formatting of the HTML directly inside my custom view. This made it very simple to add the "reload-on-rotation" feature. Here is the code I used, more details in the linked answer:

// Handle rotation
UIDevice.current.beginGeneratingDeviceOrientationNotifications()
NotificationCenter.default.addObserver(
    self,
    selector: #selector(self.orientationChanged(notification:)),
    name: NSNotification.Name.UIDeviceOrientationDidChange,
    object: nil
)

// Called when device orientation changes
func orientationChanged(notification: Notification) {
    // handle rotation here
    self.webView.loadHTMLString(self.htmlText, baseURL: nil)
}

deinit {
    NotificationCenter.default.removeObserver(self)
    UIDevice.current.endGeneratingDeviceOrientationNotifications()
}

I just want to point out two things:

self.htmlText is a variable holding the HTML text I want to load that I added to my custom view
the use of UIDevice.current.endGeneratingDeviceOrientationNotifications() was appropriate for my situation, it might not be for yours

That's all, cheers

UIWebView - Does not resize content on rotation change?

5 Answers5