iOS 8中UIWebView的内容大小

Question

我想在Web视图中显示一些小于屏幕的内容。这在iOS 7中有效，但在iOS 8中，Web视图似乎会自动将内容大小设置为屏幕大小。如何说服UIWebView在iOS 8中使用视图大小作为内容大小？

我创建了一个最小化示例来说明问题。从Xcode的单视图iPad模板开始，我添加了一个Web视图，它的高度为480像素，宽度为320像素，在父视图中居中。我将其连接到现有视图控制器中的webView输出。然后，我添加了一些代码到-viewDidLoad函数来加载一个.mp4视频到Web视图中。以下是完整的代码：

@interface ViewController ()

@property IBOutlet UIWebView *webView;

@end

NSString *const videoURL = @"https://dl.dropboxusercontent.com/u/29161243/Mahalo%2520Surf%2520Eco%2520Festival%25202014%2520-%2520Day%25204-SD.mp4";

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    NSURL *url = [NSURL URLWithString:videoURL];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}

@end

在iOS 7下，这正是我想要的效果。结果看起来像这样： 然而，在iOS 8下，视频被放大并向下移动；它看起来像内容大小与屏幕大小相同，内容原点位于我的Web视图的原点： 如何在iOS 8中获得iOS 7的行为？或者，如何调整Web视图的内容大小？

即使在iOS 7下，UIWebView通常也会以比Web视图框架更大的尺寸显示一些内容（例如HTML页面）。我还想学习如何使Web视图缩放此类内容，以便完全绘制在Web视图的宽度内，但现在与使视频内容按比例缩放相比，这是一个次要问题。

- Caleb

Answer 1

将您的viewDidLoad方法更改为：

- (void)viewDidLoad {
    [super viewDidLoad];
    self.webView.mediaPlaybackRequiresUserAction = NO;
    NSString *videoHTML= [NSString stringWithFormat: @"<style type='text/css'>body { margin:0;background-color:black}</style><video width='%f' height='%f' frameborder='0' controls autoplay><source src=\"%@\" type=\"video/mp4\"></video><meta name='viewport' content='width=device-width, initial-scale=1,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0'>", self.webView.frame.size.width, self.webView.frame.size.height,videoURL];
    [self.webView loadHTMLString:videoHTML baseURL:nil];
}

在这个html中，有许多内容，但关键是:

<meta name='viewport' content='width=device-width, initial-scale=1,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0'> 

相比默认版本：

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

我们曾经遇到过类似的iOS8问题，这个方法解决了它。我也尝试了你的示例代码，在那里也解决了它。

你可以在这里阅读有关viewport的信息：https://developer.apple.com/library/IOS/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html 希望这能帮到你！

- mattr

---

听起来这会很有帮助——我们今天下午也在研究类似的方法。非常感谢！ - Caleb

工作得非常好。调整视口正是正确的解决方案。 - Caleb

谢谢，这真的很有帮助！ - CodeBrew

Answer 2

你可以使用约束和自动布局来使网页视图填满整个屏幕，在 wAny | hAny 大小类中设置网页视图的约束将使其适用于任何设备。

- gabbler

---

我没有问题调整所需的网页视图大小 - 我想要调整内容的大小。如果您查看上面的两个图像，则每个图像中的Web视图大小相同。另一方面，内容与iOS 7图像中的Web视图匹配，但在iOS 8图像中缩放到屏幕大小。我的目标是一个小于屏幕但内容按比例缩放以适应视图的Web视图。 - Caleb

这里是示例项目，在iOS版本上看起来对我来说都很好。 - gabbler

感谢您的努力，但我正在使用一个意图小于全屏幕的Web视图。请删除导致Web视图匹配superview大小的约束条件，将其大小设置为小于superview的尺寸（例如350x500），并在iOS 7和iOS 8下再次运行应用程序。当我在您的项目中执行此操作时，我得到了类似于我在问题中发布的图片的结果。 - Caleb

是的，我得到了与你相似的结果，对此感到抱歉。 - gabbler