UIWebView无法正确加载响应式网页

Question

我正在尝试将响应式网页加载到UIWebview中，使用我的UIViewController的viewDidLoad方法中的以下代码：

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

不是基于UIWebView的帧大小加载网页的方式，而是将UIWebView的UIScrollView contentSize设置为一些看似任意的大小（大于我的Web视图框架大小）并加载响应式网页，因为它会寻找那个大小的框架。

如果我尝试加载我在Safari中使用的网址，它会根据浏览器窗口大小正确重新排列。

我已经尝试将scalesPageToFit属性设置为YES，虽然我实际上并不想缩放页面，但是它的行为与Web视图框架相关。

有没有人对于发生了什么以及如何解决这个问题有任何想法？

Answer 1

我弄清楚发生了什么。我在iPad上的UIWebView宽度小于设备宽度。网页使用设备宽度来确定页面的宽度（此代码位于＆lt; head＆gt;元素中）：

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

我能够使用我在另一个问题（https://stackoverflow.com/a/13113820/472344）中找到的内容解决问题：

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"document.querySelector('meta[name=viewport]').setAttribute('content', 'width=%d;', false); ", (int)webView.frame.size.width]];
}

Answer 2

您可以通过将UIWebView属性scalesPageToFit设置为TRUE来实现此目的。

webView.scalesPageToFit = TRUE;

这有助于我在UIWebView内使用自适应网页。

Answer 3

另一种方法是在故事板中使用布局约束。您只需将webview拖动到父视图并请求相等的宽度即可。最好将约束从webview设置为顶部布局为0，以防止状态栏与webview重叠。

Answer 4

在我的情况下，我是以编程方式创建UIWebView，我使用UIWebView将UIView添加到我的NSAutoLayoutConstraint。

myWebView = UIWebView()
//Load WebPage
myView.addView(myWebView) // After web page is loaded
//Add constraints

我用框架初始化UIWebView，它解决了我的问题。

myWebView = UIWebView(frame: CGRect(x: 0, y: 0, width: myView.frame.width, height: myView.frame.height))

希望这有帮助。

Answer 5

对于你们所有的Swifters，使用Darren的答案，这是一个超级干净的扩展：

extension UIWebView {

    func updateLayoutForContent() {
        let javascript = "document.querySelector('meta[name=viewport]').setAttribute('content', 'width=\(self.bounds.size.width);', false); "
        self.stringByEvaluatingJavaScriptFromString(javascript)
    }

}

如果你想多次调用它（例如，当设备旋转并且webView改变比例时），则很方便。