CODEWITHSUNDEEP
iphoneobjective-cuiwebview
Katlu
Katlu

Reputation: 506

UIWebView increases font size if there's more text

Hello I am trying to display two different html pages through the same UIViewController which has a UIWebView subview.

Both html pages use the same css and are similar in structure. However, I have noticed that when viewed both in iOS Simulator and on device, the font size of the page that has less content is considerably smaller than of the one that has more content.

Can someone explain to me what I could do to have the same font size on both views?

Here's my UIWebView code:

CGRect appFrame = [[UIScreen mainScreen] applicationFrame];
self.webView = [[[UIWebView alloc] initWithFrame: appFrame] autorelease];
self.webView.backgroundColor= [UIColor whiteColor];
self.webView.scalesPageToFit= YES;
self.webView.autoresizingMask = (UIViewAutoresizingFlexibleWidth |     UIViewAutoresizingFlexibleHeight);

NSString *filePath = [[NSBundle mainBundle] pathForResource:self.resourceName ofType:@"html"];
NSURL *urlLocation= [NSURL fileURLWithPath:filePath];
[self.webView loadRequest:[NSURLRequest requestWithURL:urlLocation]];
self.view = self.webView;

Here's the associated html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4 /loose.dtd">
<html>
<head>
<LINK href="manual.css" rel="stylesheet" type="text/css">
<title>My Info text</title>
</head>
<body>
    <table >
        <tr>
         <td class="title">
              <b>How to do it</b>
         </td>
        </tr>
        <tr>
         <td class ="content">
          Some Instructions on how to do it properly.
         </td>
        </tr>   
    </table>
</body>
</html>

And here's the CSS. The main problem seems to be td.content, as the title is sized properly (or at least not visibly different between both screens):

body {
background-color : rgb(255,255,255);
font-size : 35px;
font-family : Helvetica;
color : rgb(54,54,54);
margin-right : 0px;
margin-left : 0px;
}

table {
width : 100%;
height: 100%;
margin-top : 20px;
margin-bottom : 20px;   
margin-right : 0px;
margin-left : 0px;
border-spacing : 0px;
padding-right : 0px;
padding-left : 0px;
}

tr {
margin-top : 0px;
margin-bottom : 0px;    
margin-right : 0px;
margin-left : 0px;
}

td.content {
font-size : 1em;
text-align : left;
vertical-align: top;
margin-top : 0px;
margin-bottom : 0px;    
margin-right : 0px;
margin-left : 0px;
padding-top : 5px;
padding-bottom : 10px;
padding-right : 30px;
padding-left : 30px;
}

td.title {
width : 170px;
font-size : 1.5em;
font-weight : bold;
text-align : left;
vertical-align : top;
margin-top : 0px;
margin-bottom : 0px;    
margin-right : 0px;
margin-left : 0px;
padding-top : 5px;
padding-bottom : 10px;
padding-right : 30px;
padding-left : 30px;
}

Upvotes: 0

Views: 3810

Answers (2)

codercat
codercat

Reputation: 23271

I have 2 buttons - A- and A+

    @interface
NSUInteger textFontSize;

- (IBAction)changeTextFontSize:(id)sender

    switch ([sender tag]) {
        case 1: // A-
            textFontSize = (textFontSize > 50) ? textFontSize -5 : textFontSize;
            break;
        case 2: // A+
            textFontSize = (textFontSize < 160) ? textFontSize +5 : textFontSize;
            break;
    }

    NSString *jsString = [[NSString alloc] initWithFormat:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '%d%%'", 
                          textFontSize];
    [web stringByEvaluatingJavaScriptFromString:jsString];
    [jsString release];
}

Upvotes: 0

deanWombourne
deanWombourne

Reputation: 38475

Try setting to scalesPageToFit property?

[myWebView setScalesPageToFit:NO];

You've set it to YES which might affect how it decides to zoom in to the page?

(taken from the docs here)

Upvotes: 3

Related Questions