UIWebView在旋转后调整文本大小：寻找神奇错误或我的愚蠢的解释。

Question

我的应用程序中有一个UIWebView，我加载了一些HTML（文章）到它上面，并添加了一些CSS来使一切更美好。这很简单明了，一切都很完美，直到我尝试添加横屏阅读功能后才发现，UIWebView忽略了我在HTML中放置的任何css“font-size”，并且在旋转到横向模式后大幅增加字体大小。

我花了大约4-5个小时的时间（我是iPhone应用程序编程的新手，但在做正确的事情时我相当固执），试图修复它。尝试了很多很多配置选项-什么都不行。

今晚发生了一些神奇的事情。只需查看源代码：

带错误的横屏：

r = CGRectMake(0.0, 0.0, 480.0, 320.0);
[adView.view removeFromSuperview];
if (!isFullScreen) {
    minus = 50 + minus;
    [controlsView setFrame:CGRectMake(0, r.size.height - 50, r.size.width, 50)];        
} else {
    minus = 20; 
}

[textView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];  
[scrollView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];

固定横向布局（字体大小不再改变）：

r = CGRectMake(0.0, 0.0, 480.0, 320.0);
[adView.view removeFromSuperview];
if (!isFullScreen) {
    minus = 50 + minus;
    [controlsView setFrame:CGRectMake(0, r.size.height - 50, r.size.width, 50)];        
} else {
    minus = 20; 
}
[textView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];  
[scrollView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];

if (!isFullScreen) {
    minus = 1 + minus;
} else {
    minus = 20+1;   
}
[textView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];  
[scrollView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];

你可以看到，我只是再次添加了相同的代码，并将边距（减去）增加了一个点。然后再次设置 setFrame（不，这并不能解决只使用一个 setFrames 调整大小的问题）。

我很高兴它能工作，但我想知道如何以正确的方式实现，因为现在代码看起来很愚蠢，在应用程序底部有1个点高的边距。

不要问我为什么尝试复制粘贴相同的代码..

- sniurkst

---

2016年解决方案：https://dev59.com/KnE85IYBdhLWcg3wkkfK#2711132 - Fattie

Answer 1

Safari Web Content Guide中还提到了如何在CSS中禁用文本自适应大小，这在我的情况下解决了问题。

html {
    -webkit-text-size-adjust: none; /* Never autoresize text */
}

- Bjørn Olav Ruud

---

优秀的修复。对我有用。 :) - Sam

谢谢你的回答，这让我感到非常困扰。 - Daniel Wood

如果您想保留缩放功能，请按照此答案使用“100％”，而不是“none”。此答案。 - DennisWelu

Answer 2

神奇的解决方案是：

<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'>

要是我一周前知道就好了.. 浪费了这么多时间和精力..

- sniurkst

---

这对我没有用，但上面的 -webkit-text-size-adjust: none; CSS 对我有用。只是提供信息。 - kdbdallas

这解决了我的问题。只需在那个标签后附加HTML，视口就会按预期大小调整。 - respectTheCode

嗨@sniurkst！你能把接受的答案改成下面现在正确的答案吗（7年后！）？谢谢。 - Fattie

这个解决方案很有效，但使用后你就不能在webView上进行捏合缩放了。 - Sayalee Pote

Answer 3

使用前两个答案，CSS属性：

html {
    -webkit-text-size-adjust: none; /* Never autoresize text */
}

以及 meta 标签：

<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'>

我能够使用这段 JavaScript 代码将它们注入到现有的网站中：

var style = document.createElement(\"style\"); 
document.head.appendChild(style); 
style.innerHTML = "html{-webkit-text-size-adjust: none;}";
var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);

使用UIWebViewDelegate中的webViewDidFinishLoad：

- (void)webViewDidFinishLoad:(UIWebView *)webView{

    NSString *javascript = @"var style = document.createElement(\"style\"); document.head.appendChild(style); style.innerHTML = \"html{-webkit-text-size-adjust: none;}\";var viewPortTag=document.createElement('meta');viewPortTag.id=\"viewport\";viewPortTag.name = \"viewport\";viewPortTag.content = \"width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;\";document.getElementsByTagName('head')[0].appendChild(viewPortTag);";
    [webView stringByEvaluatingJavaScriptFromString:javascript];

}

- pablobart

---

也适用于WKWebView！ [webView evaluateJavaScript:javascript] completionHandler:^(NSString *result, NSError *error) { if (error) NSLog(@"%@", error); else NSLog(@"完成"); }]; - Alex Cohn

Answer 4

您可能只需要阅读这篇文章。 https://developer.apple.com/library/content/documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html 同样地，如果您仅指定了视口宽度，则高度和初始缩放比例将被推断。图3-15展示了当视口宽度设置为320时，相同网页的渲染结果。请注意，纵向方向的渲染与图3-14中相同，但横向方向保持320像素的宽度，这会改变初始缩放比例并在用户切换到横向方向时产生缩放效果。

- Azeem.Butt

---

你能解释一下在我的情况下如何避免这种情况吗？顺便说一句，我不是加载外部页面，我是动态创建HTML，然后将其加载到我的Webview中。 - sniurkst

Answer 5

我尝试了您的方法，但没有成功。

对我起作用的解决方案是：

[webView reload];

- sashaeve

Answer 6

我有另一种方法来解决它，通过添加元素：

<table>
<tr>
<td>
  [your html content]
</td>
</tr>
</table>

- Richter