CODEWITHSUNDEEP
htmlioscssuiwebview
Matt Burland
Matt Burland

Reputation: 45135

Orientation change causes font size changes

I have a UIWebView embedded in a UIViewController and I'm having some really weird behavior when the device is rotated. My text has a font size set (in css) at 11px, but when I rotate to landscape, the font is resized to 19px (according to Safari) and I can't figure out where that re-calculation is coming from. Even stranger, another (single line) div right above it has a font size of 10px and doesn't get resized.

I have something like this:

<div class="date">Sep 16</div>
<div class="body"><span class="bold">blah:</span> blah, blah</div>

With css something like:

div.date {
    font-size: 10px;
    font-weight: bold;
    width: 100%;
}

div.body {
    font-size: 11px;
    width: 100%;
}

The body get resized while date doesn't. I'm not sure if the problem is HTML / CSS or with the settings on the UIWebView.

Any ideas?

Upvotes: 1

Views: 1411

Answers (2)

Sunil Targe
Sunil Targe

Reputation: 7459

You may reload WebView again while orientation. This works for me.

Use below methods in your ViewController:

- (void)viewWillLayoutSubviews {
  [super viewWillLayoutSubviews];
  [self.view setNeedsUpdateConstraints];
}

- (void)updateViewConstraints {
  [super updateViewConstraints];
  [yourWebView loadHTMLString:yourHTMLString baseURL:nil];
}

Upvotes: 0

Ben S
Ben S

Reputation: 69342

Safari automatically resizes an scales the viewport on orientation changes and will take some liberties with elements in the root <body> tag.

The goal Safari has in mind is to fill the screen with content, so if your content doesn't quite fill the space, Safari will scale up some elements to fill it.

You can set some attributes such as minimum-scale and maximum-scale as well as setting the viewport's width size if you want a specific behavior.

Upvotes: 1

Related Questions