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

Question

我有一个iPad应用程序，我想在我的视图控制器的分区空间中显示UIWebView。我像iPhone一样制作了320px的宽度，并希望内容能够准确呈现iPhone上的内容。但是，我加载的任何页面仍然以完整的iPad大小呈现。

我已尝试通过NSUserDefaults设置用户代理，虽然这有助于第一页，但它 1.）单击链接后不起作用，如图1所示 2.）渲染谷歌等网站的方式与你在iPhone Safari浏览器上加载谷歌的方式略有不同。

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浏览器上加载谷歌的方式略有不同。

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

Answer 1

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

1。）将User-Agent设置为iPhone而不是iPad。我不想全局设置它，但不确定如何在每个请求的基础上调整标头，尤其是当用户单击UIWebView中的链接时。我还希望能够获得iPad的默认userAgent，只需更换iPad版iPhone，以便其他用户代理字符串对于设备是正确的，就像运行iPhone OS 7_1_1的人一样。 / p>

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图标）。它不会将内容缩放到适合页面的高度，但会调整以适应宽度（这就是我想要的）。

Answer 2

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