UIWebView - 如何在 iPad 上显示 iPhone 大小的内容答案

【问题标题】：UIWebView - how to display iPhone-sized content on an iPadUIWebView - 如何在 iPad 上显示 iPhone 大小的内容
【发布时间】：2014-07-25 15:47:36
【问题描述】：

我有一个 iPad 应用程序，我想在我的视图控制器的分隔空间中显示 UIWebView。我将宽度设置为 320 像素，就像 iPhone 一样，并且希望内容能够准确地呈现在 iPhone 上的样子。但是，我加载的任何页面仍会以 iPad 的完整尺寸呈现。

我尝试通过 NSUserDefaults 设置用户代理，虽然这对第一页有帮助，但它 1.）点击链接后不起作用，如图1 2.) 与在 iPhone Safari 浏览器上加载 google 相比，呈现 google 之类的网站略有不同。

NSString* userAgent = @"Mozilla/5.0 (iPhone; CPU iPhone OS 7_1 like Mac OS X)";
[[NSUserDefaults standardUserDefaults] registerDefaults:@{@"UserAgent" : userAgent}];

我已尝试将缩放页面设置为适合 UIWebView.scalesPageToFit，但这只会在窗口中缩放 iPad 版本的页面，导致内容难以辨认。

我还尝试在加载后使用 Javascript 来修复页面，但这也不起作用。与在 iPhone Safari 浏览器上加载 google 相比，它呈现 google 之类的网站略有不同。

- (void)webViewDidFinishLoad:(UIWebView*)webView {
    if(webView.frame.size.width < webView.window.frame.size.width) {
        // width=device-width results in a wrong viewport dimension for webpages displayed in a popover
        NSString *jsCmd = @"var viewport = document.querySelector('meta[name=viewport]');";
        jsCmd = [jsCmd stringByAppendingFormat:@"viewport.setAttribute('content', 'width=%i, initial-scale=1.0, user-scalable=1');", (NSUInteger)webView.frame.size.width];
        [webView stringByEvaluatingJavaScriptFromString:jsCmd];
    }
    // stop network indicator
    [UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
}

而不是像我的 iPhone 5S 上这样渲染：

任何有关如何在 iPad 中实现 iPhone 风格的 UIWebView 的帮助将不胜感激！谢谢！

编辑：

我尝试将缩放系数设置为仅 iPad 的宽度，但它只会使整个 iPad 版本的页面适合宽度，并且内容难以辨认。仍然不像上面的 iPhone。

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    CGSize contentSize = webView.scrollView.contentSize;
    CGSize viewSize = webView.bounds.size;

    float rw = viewSize.width / contentSize.width;

    webView.scrollView.minimumZoomScale = rw;
    webView.scrollView.maximumZoomScale = rw;
    webView.scrollView.zoomScale = rw;
}

【问题讨论】：

标签： ios ipad ios7 uiwebview

【解决方案1】：

尝试使用UIWebView.scalesPageToFit 属性。这将调整网页大小以适应 webview 的大小。

【讨论】：

我已经在我的问题中提到了它的影响。所做的只是缩放 iPad 大小的页面以使页面的全部内容适合窗口（宽度和高度）。这使得页面难以辨认，用户必须放大才能看到页面，并且仍然以 iPad 尺寸呈现。这不是我想要的效果。

【解决方案2】：

好的，我想我解决了自己的问题。这需要三个步骤才能适用于 ios7。

1.) 将用户代理设置为 iPhone 而不是 iPad。我不想在全局范围内设置它，但不确定如何根据每个请求调整标头，尤其是当用户单击 UIWebView 中的链接时。我还希望能够获得 iPad 的默认 userAgent 并为 iPhone 更换 iPad，以便用户代理字符串的其余部分对于设备是正确的，就像运行 iPhone OS 7_1_1 的人一样。

NSString* userAgent = @"Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_6 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B651";
[[NSUserDefaults standardUserDefaults] registerDefaults:@{@"UserAgent" : userAgent}];

2.) 运行 Javascript 来更改页面视口的设备宽度。

[webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"document.querySelector('meta[name=viewport]').setAttribute('content', 'width=%dpx;', false);", (int) webView.frame.size.width]];

3.) 缩放页面以适应

没有响应式设计的页面将缩放以适应 iPhone Safari 浏览器，因此我们在情节提要中也启用了该功能。但是，正如我原来的问题中所解释的那样，仅此一项并不能解决问题。

现在页面以正确的大小呈现，就像在 iPhone 上一样。

几件需要注意的事情。该页面现在呈现其内容的方式和属性与在 iPhone 上相同（大文本，搜索栏在编辑时展开以覆盖 Google 图标）。它不会缩放内容以适应页面的高度，但会调整以适应宽度（这是我想要的）。

【讨论】：