CODEWITHSUNDEEP
iosuiwebview
Simple99
Simple99

Reputation: 1028

Text in UIWebView changes size or weight on device rotation

I have a UIWebView which at the moment displays a very simple HTML string. It looks fine in portrait but in landscape the text changes - the font looks heavier which is not what I want. See the image bellow:

Image of font render problem

The top line is what is shown in portrait and the bottom what is shown in landscape. The text is Chinese but the problem is the same with English.

Here is my code:

- (void)displayText
{
    [self.myWebView loadHTMLString:@"<html style=\"-webkit-text-size-adjust: none; font-size-adjust:none; \"><head><meta name=\"viewport\" content=\"width=device-width; initial scale=1.0; maximum-scale=1.0;\"></head><body style=\"background-color:#FFFFFF; font-size:28px; color:#DDDDDD;\">你好。你好。你好。你好。你好。你好。你好。你好。</body></html> " baseURL:[NSURL URLWithString:@""]];
}

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
    [self.myWebView reload];
}

Any ideas what I am doing wrong?

THANK YOU!

Upvotes: 1

Views: 1713

Answers (1)

Simple99
Simple99

Reputation: 1028

This CSS works for me:

-webkit-transform: translate3d(0,0,0);

I found the answer here:

UIWebView font is thinner in portrait than landscape

UPDATE:

One issue with the above CSS is there is some delay before text is rendered if the HTML is reloaded. I have found that setting the UIWebView's opaque property to FALSE works better:

self.myWebView.opaque = FALSE;

This seems like a bit of a hack. Hopefully there is a better solution.

Upvotes: 2

Related Questions