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

【问题标题】：UIWebView not loading responsive web page correctlyUIWebView 无法正确加载响应式网页
【发布时间】：2014-07-20 11:02:10
【问题描述】：

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

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

它不是根据 UIWebView 的框架大小来加载网页，而是将 UIWebView 的 UIScrollView contentSize 设置为一些看似任意的大小（大于我的网络视图框架大小）并将响应式网页加载为它会寻找那个尺寸的框架。

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

我尝试将 scalesPageToFit 属性设置为 YES，虽然我实际上并不想缩放页面，但让它响应 Web 视图框架。

是否有人对正在发生的事情以及如何解决它有任何想法？

【问题讨论】：

请展示您的“响应式”CSS。听起来这执行不正确。这与 Web 视图的框架大小无关。
可能是这样，但页面在 Safari 中是响应式的（在桌面和 iOS 上）。为什么它在加载到 Web 视图时不起作用，但在 iPhone Safari 浏览器上加载时却可以正常工作？不幸的是，我不确定是否可以发布 css，因为这是客户的专有项目。
“不幸的是，我不确定我是否可以发布 css” 好吧，这就是行动所在。您至少可以显示 CSS 的结构（显然，尤其是关于媒体查询）。页面的视口设置也可能与此处相关。
是的，这是页面视口设置，谢谢！

标签： ios ios7 uiwebview

【解决方案1】：

我知道发生了什么。我在 iPad 上的 UIWebView 宽度小于设备宽度。网页使用设备宽度来确定页面的宽度（此代码在

元素中）：

<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]];
}

【讨论】：

应该对其他人有用。很高兴你发现了这一点！
非常有用。对于在 SO 上发现的这个问题，我尝试了几十种类似的解决方案，这是唯一一个完美的解决方案。谢谢。
在我的例子中，放置代码的更好位置是在 'webView:shouldStartLoadWithRequest:' 内，以便内容在在显示给用户之前调整大小。

【解决方案2】：

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

webView.scalesPageToFit = TRUE;

这有助于我在 UIWebView 内部使用响应式网页。

【讨论】：

多么出色的修复。干杯

【解决方案3】：

另一种方法是在情节提要中使用布局约束。您可以简单地将 webview 拖到父视图并要求相等的宽度。最好将 webview 到 top layout 的约束设置为 0，以防止状态栏与 webview 重叠。

【讨论】：

【解决方案4】：

在我的例子中，我以编程方式创建了一个UIWebView，并使用NSAutoLayoutConstraint 将UIWebView 添加到我的UIView。

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))

希望这会有所帮助。

【讨论】：

【解决方案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 改变比例时），这将非常方便。

【讨论】：