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

Question

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

我已经尝试通过NSUserDefaults设置用户代理,虽然这有助于第一页,但是1.)点击链接后不起作用,如图1中所示.2.)像google一样呈现谷歌的网站略有不同是在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 for 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图标).它不会将内容缩放到适合页面的高度,但会调整以适应宽度(这就是我想要的).