当 UIWebView 的宽度小于窗口的宽度时，UIWebView 中的网页无法正确自动调整大小答案

【问题标题】：Webpage in UIWebView doesn't autoresize correctly when UIWebView's width is less than the window's width当 UIWebView 的宽度小于窗口的宽度时，UIWebView 中的网页无法正确自动调整大小
【发布时间】：2011-08-01 10:54:48
【问题描述】：

我做了一个简单的测试项目，在一个填充窗口的 UIView 上只包含一个 UIWebView。当 UIWebView 的宽度与 UIView 相同时，一切正常。当 UIWebView 的宽度小于容器的宽度时，水平滚动条出现不规则。我加载的网页是一个本地 html 文件。没有设置宽度，所以它应该适合浏览器/UIWebView 的宽度。

请帮忙。谢谢。

【问题讨论】：

答案可能取决于本地 HTML 文件中的标记。里面有没有指定宽度的东西（例如样式）？
不，只是简单的<p> 标签，例如：<p>text here...</p>

标签： iphone cocoa-touch ipad

【解决方案1】：

方法1.webView.scalePageToFit = YES，但是当webView的宽度改变时，网页的字体大小也会随之改变，解决这个问题，你可以试试方法2：

方法2.在你的Objective-C代码中动态设置webView的宽度，这样当 UIWebView 的宽度发生变化时，通过调用 javascript 脚本来改变 HTML 网页的宽度。

int webViewWidth = isPortraitOrLandscape ? 768:1024; // the dynamic width of the webView
NSString *javascript = [NSString stringWithFormat:@"document.getElementsByTagName('body')[0].style.width = '%dpx'", webViewWidth];
[webView stringByEvaluatingJavaScriptFromString:javascript];

通过这样做，webView 的宽度可以与实际的 HTML 网页相匹配。

【讨论】：

非常好。第一个似乎有时对我不起作用，特别是在 splitiviewcontroller 的详细控制器中使用 UIWebView 时（不知道为什么）。第二种方法效果很好，但我只能使用以下 JS 字符串格式 @"document.getElementsByTagName('body')[0].style.width = '%1.0fpx'"

【解决方案2】：

上述解决方案也完全对我有用。问题希望文本以适当的浏览器视图大小换行，而不是缩小内容，也不允许滚动。

我的解决方法是通过执行一些偷偷摸摸的 javascript 来强制将视口放入 html：

javascript = [NSString stringWithFormat:@"var viewPortTag=document.createElement('meta');  \
              viewPortTag.id='viewport';  \
              viewPortTag.name = 'viewport';  \
              viewPortTag.content = 'width=%d; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;';  \
              document.getElementsByTagName('head')[0].appendChild(viewPortTag);" , (int)authWebView.bounds.size.width];

[authWebView stringByEvaluatingJavaScriptFromString:javascript];

您的里程数可能会有所不同，具体取决于您可能需要或可能不需要的其他视口设置，或者您的网页是否已经具有指定视口的元标记。

javascript 的想法来自这个答案：How to insert metatag without using jquery append?

【讨论】：

不错的解决方案。在 iPad 上以横向模式使用嵌入式 UIWebView 时，像这样设置宽度对我来说效果很好。不应该用逗号代替分号吗？
另外，如果您想更新现有视口标签而不是添加新标签，另一种选择：NSString *javascript = [NSString stringWithFormat:@"document.querySelector('meta[name=\"viewport\"]').setAttribute(\"content\", \"width=%d,initial-scale=1.0,maximum-scale=1.0,user-scalable=0\")", (int)authWebView.bounds.size.width];

【解决方案3】：

您可以通过在<head> 中包含元标记来为视口设置显式宽度，如下所示：

<meta name = "viewport" content = "width = 590">

请参阅Safari Web Content Guide。

【讨论】：

另外，如果你想让 HTML 负责，在 iphone 和 ipad（甚至是 android 设备）上都可以工作，那也不好。此外，考虑重用 HTML，如果您还针对旧的 android 设备并使用固定位置（目前是我的情况），您必须使用 <meta name="viewport" content="width=device-width, user-scalable=no"> caniuse.com/#search=position

【解决方案4】：

Tyr 制作网页视图 mode 缩放以填充。

【讨论】：

如果 UIWebView 的 Scale Pages to Fit 模式为 TRUE，则纵向文本会比横向文本看起来更小。因为这个视野在景观上更广阔。这不是我所期望的。