UIWebView stretched when dismissing UISplitViewController popover on iPhone 6 Plus

Question

I am using a split view controller with a UIWebView in the details view. On the iPhone 6 Plus, in landscape orientation, when I dismiss the master view to expand the details view to fit the whole screen, the content of the UIWebView gets stretched rather than resized to take advantage of the additional real estate.

How can I get the UIWebView to adjust the width of the content rather than stretching/zooming it when the the popover is dismissed?

(I was originally using a UITextView in the details view and converting the HTML string to an NSAttributedString. I didn't have the stretching issue with that, but the scrolling was choppy, etc., with large amounts of text. The UITextView works much better in this regard, with the stretching being the only issue.)

Prior to dismissing popover:

After dismissing popover:

EDIT: Here the string format I am using for the content displayed in the UIWebVIew:

    private static let formatStringForUIWebView: NSString =
    "<html>" +
    "<head>" +
    "   <title></title>" +
    "   <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0\" />" +
    "   <style type=\"text/css\">" +
    "      pre { width: auto; white-space: pre-wrap; }" +
    "   </style>" +
    "</head>" +
    "<body>" +
    "   <div style='color: #555555; font-size: 12px; font-family: Helvetica;'>%@</div>" +
    "</body>" +
    "</html>";

Berry Blue · Accepted Answer · 2015-01-17T18:18:42.540

4

This might be what you're looking for. It prevents font scaling.

-webkit-text-size-adjust: none;

Here is a reference link to this css property.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

edited Jan 17 '15 at 18:18

answered Jan 17 '15 at 18:05

Berry Blue

15,330
18
62
113

YES YES YES!!!! This makes it work perfectly. As soon as it lets me, I will award you the bounty (says I can in 4 hours). – John Chapman Jan 17 '15 at 18:07
You are my hero! Thanks so much! – John Chapman Jan 17 '15 at 18:07
1

You're welcome! Glad I could help. I also added a reference link that details this css property. – Berry Blue Jan 17 '15 at 18:19
1

Nice solution. On our projects, my recommendation was enough, but this is interesting. – Léo Natan Jan 17 '15 at 18:25
This could very well be the content that is being placed in the UIWebView. All of the content is wrapped in a PRE tag for displaying like code. I had to use some CSS on the PRE tags in order to get them to even wrap correctly, so they could be the culprit. – John Chapman Jan 17 '15 at 22:20

score 2 · Answer 2 · answered Jan 16 '15 at 22:58

2

In your HTML content, define a meta tag that will instruct it to have a view port with the width of the device width:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

answered Jan 16 '15 at 22:58

Léo Natan

56,823
9
150
195

I updated the question with the format string I am using for the HTML content in the UIWebView. As you can see, I have already done this and it has not helped (that method helps to get the HTML to display correctly when it loads, however when dismissing the popover, it still stretches). – John Chapman Jan 17 '15 at 18:04
It's as if the UIWebView just expands with the view, but nothing triggers redrawing the content. – John Chapman Jan 17 '15 at 18:05

UIWebView stretched when dismissing UISplitViewController popover on iPhone 6 Plus

2 Answers2