如何让iOS UIWebView 正确显示手机网站？答案

【问题标题】：How to make iOS UIWebView display a mobile website correctly?如何让iOS UIWebView 正确显示手机网站？
【发布时间】：2015-05-13 02:44:53
【问题描述】：

我是 iOS 应用开发的新手，我刚刚尝试使用 UIWebView 在我的应用中显示移动网站，但不太成功。

我所做的只是一些在谷歌搜索中发现的最小 Xcode 项目配置和编码：

在 Xcode 中使用 Single View Application 模板创建一个新的 iOS 应用程序项目。
将 Web 视图 从 Object Library 拖到 View Controller Main.storyboard的场景。
按住 Control 键的同时，将 Web 视图 从 View Controller 场景拖到 ViewController.h 编辑器中，生成一个源代码行如下：
```
@property (weak, nonatomic) IBOutlet UIWebView *myWebView;
```

在 ViewController.m 中添加如下代码：

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    NSURL *url = [NSURL URLWithString:@"http://www.amazon.com"];
    [self.myWebView loadRequest:[NSURLRequest requestWithURL:url]];
}

这就是我所做的一切（以及那些教程告诉我的一切）。在我构建并运行应用程序后（在模拟器和真正的 iphone 设备上），该站点确实在应用程序的视图中加载（并且确实加载了移动版本而不是 PC 版本），但它显示的站点好像视图很多比实际的iphone屏幕大。这是一个截图（在这种情况下是亚马逊，但其他网站基本相同）：

应该怎样做才能让iOS UIWebView正确显示移动网站？

刚刚尝试了 Dipen Chudasama 的禁用“用户大小类”选项的建议，在所有这些建议中，第一次，结果确实发生了一些变化（从左对齐到居中对齐），但仍然没有我在找什么。这是截图：

编辑：

感谢各位热心人士提出的所有建议。据我了解，在 UIWebView 中加载像 amazon.com 这样的网站应该是一项相当容易的任务，但是，我没有成功地提出任何建议。

如果有人可以（通过 Github 或类似方式）与我分享一个示例 xcode 项目（使用最新版本的 xcode 工具链从头开始），只有一个可以正确加载 amazon.com 的 UIWebView，那就太好了。这样我就可以逐行比较，也许可以在我自己的项目中找到我做错的地方。

【问题讨论】：

你在哪里设置网页视图框架？或者您在情节提要中设置了什么框架？
@DipenChudasama 我曾经尝试在viewdidLoad() 中将self.view.frame 分配给self.myWebView.frame，但结果是一样的
查看我的答案并尝试一下。

标签： ios iphone xcode html uiwebview

【解决方案1】：

UIWebView 有一个名为“scalesPageToFit”的属性：

self.myWebView.scalesPageToFit = YES;
self.myWebView.contentMode = UIViewContentModeScaleAspectFit;

应该可以解决问题。

【讨论】：

这个的 Swift 版本？

【解决方案2】：

您可以使用UIWebview 属性webView.scalesPageToFit = YES; 缩放页面以适应屏幕宽度

否则你可以在UIWebView中运行一个js命令来做缩放：

NSString *js = [NSString stringWithFormat:@"document.body.style.zoom = 0.8;"];
[webView stringByEvaluatingJavaScriptFromString:js];

【讨论】：

用另一种方法编辑了我的答案。
将 webview 委托设置为 self 并实现此委托方法 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { webView.scalesPageToFit = YES; //set this here return YES; }
尝试了你上面的建议，结果还是一样。

【解决方案3】：

我明白了..您只需在情节提要中设置 iPhone 尺寸视图而不是任何尺寸，这意味着禁用使用尺寸类复选框并查看，这将起作用..:)

- (void)viewDidLoad {
    [super viewDidLoad];

    NSURL *url = [NSURL URLWithString:@"http://www.amazon.com"];
    [self.myWebView loadRequest:[NSURLRequest requestWithURL:url]];
}

Thats it, Try this one only.

或

 you have to set appropriate constraint for this.

【讨论】：

刚试过这个建议，结果是一样的。
我明白了..您只需在情节提要中设置 iPhone 5 尺寸视图而不是任何尺寸，这意味着禁用使用尺寸类复选框，看看，这将起作用..:)
感谢您的建议。请参阅我对尝试您的建议的结果的原始问题的编辑。
现在我想看看你更新的代码..你的代码有什么改变吗..？
我尝试了所有的组合：设置和不设置 web 视图框架，设置和不设置 scalesPageToFit。

【解决方案4】：

我和@goodbyeera 遇到了同样的问题，然后意识到我没有在UIWebView 上设置AutoLayout 约束。因此，当WebView 加载时它对于iphone 屏幕来说太大了。通过添加约束以适应 UIWebView 到屏幕修复了这一切。希望这对您有所帮助。

【讨论】：