webview使用masonry简单适配iPhone

现在做的一个iOS的webApp，使用WKWebView进行使用。但在适配是，之前使用autoresizing进行简单的适配，显示的是正常的，但到了iPhone X的适配上却出现了问题（safa area，齐刘海是什么鬼）。

最开始的想法是使用宏定义进行适配，但后来试了试，感觉好麻烦的说。后来实在是忍不了了，想起了mesonry（之前有看新浪的新闻说mesonry要开始弃用了，所以一开始是拒绝的），然后进行了简单的适配，发现确实是特简单（我只用了WKWebView和UIProgressView，约束很少，而且不用怎么更新）。

废话不多说了，上代码

/** 之前使用AutoresizingMask进行约束 */
- (void)setUIFrameWithAutoresizing {
    
    [self.view addSubview:self.webView];
    // 使用AutoresizingMask进行适配，和父视图等宽登高以便保持和父视图上、下、左、右的边距不变
    [self.webView setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight];
    // 设置如果需要就更新约束
    [self.webView setTranslatesAutoresizingMaskIntoConstraints:YES];
    
    [self.webView addSubview:self.progressView];
    self.progressView.frame = CGRectMake(0, 0, screenW, 5);
}

/** 现在使用Masonry进行约束 */
- (void)setUIFrameWithMasonry {
    
    // 需要在block里面操作，所以先将 self 设为弱指针
    __weak typeof(self)weakSelf = self;
    
    // 添加webView到当前视图上（使用masonry需要先添加到父视图上才可以，不然会崩溃）
    [self.view addSubview:self.webView];
    
    // 设置webView 的 masonry 约束
    [self.webView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        // iOS 11 适配（iPhoneX最低都是iOS 11）
        if (@available(iOS 11.0, *)) {
            // 设置顶部和底部 与 safeArea 相同（贴合）
            make.top.equalTo(weakSelf.view.mas_safeAreaLayoutGuideTop);
            make.bottom.equalTo(weakSelf.view.mas_safeAreaLayoutGuideBottom);
        } else {
            // 设置顶部 与 父视图（view）向下便宜20个像素
            make.top.equalTo(weakSelf.view.mas_top).with.offset(20);
            // 设置底部与俯视图贴合
            make.bottom.equalTo(weakSelf.view.mas_bottom);
        }
        // 设置左边距和右边距 与 父视图相同（贴合）
        make.left.equalTo(weakSelf.view.mas_left);
        make.right.equalTo(weakSelf.view.mas_right);
    }];
    
    // 设置progress的 masonry 约束 （需要注意的是父视图webview是已经加载并约束完的，不然会报错）
    [self.webView addSubview:self.progressView];
    [self.progressView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(weakSelf.webView.mas_top);
        make.width.equalTo(weakSelf.webView.mas_width);
        // 设置高度为3个像素
        make.height.mas_equalTo(@3);
    }];
}

这只是我自己使用的简单的约束，具体的masonry可以自行百度查看mesonry的详解（我喜欢将progress设置在webView上，这样不论怎么样都比较适配）。

现在在做webApp的项目，之后可能会将项目的demo上传到我的github。欢迎先来观看下载。