如果有更多文本，UIWebView 会增加字体大小答案

【问题标题】：UIWebView increases font size if there's more text如果有更多文本，UIWebView 会增加字体大小
【发布时间】：2011-01-24 14:19:55
【问题描述】：

你好我正在尝试通过具有 UIWebView 子视图的同一个 UIViewController 显示两个不同的 html 页面。

两个 html 页面使用相同的 css 并且结构相似。但是，我注意到，在 iOS 模拟器和设备上查看时，内容较少的页面的字体大小比内容较多的页面要小得多。

有人可以向我解释我可以做些什么来在两个视图上使用相同的字体大小吗？

这是我的 UIWebView 代码：

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;

这是相关的 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>

这是 CSS。主要问题似乎是 td.content，因为标题大小合适（或者至少两个屏幕之间没有明显不同）：

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;
}

【问题讨论】：

标签： iphone objective-c uiwebview

【解决方案1】：

尝试设置为 scalesPageToFit 属性？

[myWebView setScalesPageToFit:NO];

您已将其设置为 YES，这可能会影响它决定放大页面的方式？

（取自the docs here）

【讨论】：

如果我将其设置为 NO，两个视图都会显示巨大的字体，并且文本会远远超出屏幕，这也不是我想要的。
所以在你的 CSS 中将 body 的宽度设置为 320px 并让字体变小 :) 你的字体设置为 35px - 这是相当大的 - 它只是按照你说的去做！

【解决方案2】：

我有 2 个按钮 - A- 和 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];
}

【讨论】：