iPad上的UIWebView旋转 [英] UIWebView rotation on iPad

问题描述

在iPad上，我在分割视图控制器的细节一侧显示一个视图，它基本上只是一个 UIWebView ，它在应用程序中加载一个HTML文件束。该应用程序支持旋转和隐藏/显示拆分的主侧。

On the iPad, I present a view in the "detail" side of a split view controller that is basically just a UIWebView, which loads an HTML file in the application bundle. The application supports rotation and hides/shows the "master" side of the split as appropriate.

当 UIWebView 时最初以横向模式加载，其内容似乎正确大小......内容高于屏幕，因此您可以垂直滚动，但不能水平滚动。 （HTML内容几乎都是用CSS设置的文本，底部只有一个小的~300x50图像。）

When the UIWebView is initially loaded in landscape mode, its content seems to be "sized" properly... the content is taller than the screen, so you can scroll vertically, but not horizontally. (The HTML content is nearly all text styled with CSS, with only a small ~300x50 image at the bottom.)

如果你然后将屏幕旋转为肖像，那么HTML内容似乎仍然大小合适 - 垂直滚动条存在，但不是水平，因为它最初。旋转回景观，一切仍然很好。

If you then rotate the screen to portrait, the HTML content still seems to be sized okay -- vertical scrollbar is present, but not horizontal, as it was initially. Rotating back to landscape and everything is still peachy.

到目前为止，非常好。

现在，如果 UIWebView 最初以纵向方向加载，所有内容也都正确（垂直滚动条，无水平）。但是，如果将其旋转为横向，则内容会突然变为水平滚动条，因为其中一段文本宽度大于UIWebView的宽度。 （不巧的是，我确定，但是这个长段的大小非常适合 UIWebView 稍微宽一点，当它定向为肖像时。）

Now, if the UIWebView initially loads in portrait orientation, everything is also "sized" properly (vertical scrollbar, no horizontal). But, if you rotate it to landscape, the content suddenly gets a horizontal scrollbar, because one of the paragraphs of text is wider than the width of the UIWebView. (Not coincidentally, I'm sure, but that long paragraph is sized perfectly for the slightly larger width the UIWebView has when it's oriented as portrait.)

我原以为/假设iPad的旋转会导致 UIWebView 调整其框架的大小，并且当它的大小调整时，也是适当调整其HTML内容的大小。 （想想拿一个Web浏览器窗口并缩小它。）为什么不发生这种情况？

I was expecting/assuming that rotation of the iPad would cause the UIWebView to have its frame be resized, and when it's resized, to also resize its HTML content appropriately. (Think of taking a Web browser window and shrinking it.) Why isn't that happening for me?

我想避免使用Scales Pages to Fit属性，因为文本不确定地缩小。

I would like to avoid using the "Scales Pages to Fit" property because the text shrinks non-deterministically.

推荐答案

通过添加此HTML5视口元标记解决了我的问题：

Just solved my issue with this by adding this HTML5 Viewport meta tag:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

到我的HTML的head部分，也许这个元标记的变体可能有帮助？

to the head section of my HTML, maybe a variation of this meta tag may help?

虽然我的问题是在我的应用程序以横向模式启动时触发的，但是在纵向模式下，这可能是一个常见原因。

Although my issue was triggered when my app was started in landscape mode, while yours in portrait mode, it may be a common cause.

我在iPad中的webView也有另一个有趣的问题，常见的解决方案似乎是元标记：

I also had another funny issue with the webView in iPad and the common solution seems to be that meta tag:

iPad Simulator WebView / Google Maps API问题

这篇关于iPad上的UIWebView旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！