电商项目,在做商品详情的时候。关于产品介绍,是通过得到后台的html代码进行显示。那么html代码的尺寸和我们手机的尺寸会不一样,那么这个时候就要做屏幕的自适应。
第一种方法:直接替换里面的宽度值,但是这个方法有弊端。万一后台给我们的html代码宽度是可变的呢,那这就不管用呢
// html加载
NSString *heder = @"html代码";
// 改变html的宽度让自适应
NSString *htmlString = [heder stringByReplacingOccurrencesOfString:@"300" withString:[NSString stringWithFormat:@"%.f",屏幕宽度]];
[self.webView loadHTMLString:heder baseURL:nil];
第二种方法。这个方法是我从网上找到的,但做了一点改动。也可以说自己解决了一个坑
别人的代码,这么运行没有什么效果。(我自己测试是没有效果,不知道广大同胞是不是同样)。那么怎么办呢,其实很简单,那就是改js代码。把 width=device-width 改成 width=100% 这样就可以呢。所以看不懂js代码也很苦逼的
- (WKWebView *)webView {
if (!_webView) {
_webView = [[WKWebView alloc] init];
//以下代码适配大小
NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
WKUserContentController *wkUController = [[WKUserContentController alloc] init];
[wkUController addUserScript:wkUScript];
WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
wkWebConfig.userContentController = wkUController;
_webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:wkWebConfig];
[self.view addSubview:_webView];
_webView.navigationDelegate = self;
}
return _webView;
那么自适应高度呢,首先遵循代理
_webView.navigationDelegate = self;
然后执行他的代理方法
#pragma mark —— WKNavigationDelegate
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
[webView evaluateJavaScript:@"document.body.scrollHeight;" completionHandler:^(id _Nullable any, NSError * _Nullable error) {
NSString *heightStr = [NSString stringWithFormat:@"%@",any];
[self.webView setHeight:heightStr.intValue];
[self.tableView reloadData];
}];
}
或者试用此方法
https://www.jianshu.com/p/20cea397cd11
网友评论