webview在手机上显示的内容经常非常宽,显示出来之后要手动缩放才能正常浏览。但如果用
[self.webView setScalesPageToFit:YES];
则会被居中缩放的非常小,如图:
(请无视我demo里的title。。。)
其实html本身有一个缩放的方法,可以在<head>里加一个节点:
<meta name="viewport" content="initial-scale=1.0, minimum-scale=0.1, maximum-scale=2.0, user-scalable=yes\">
content里规定了这个界面:
最小缩放比例是0.1:minimum-scale=0.1
最大缩放比例是2.0:maximum-scale=2.0
允许用户缩放:user-scalable=yes
当前缩放比是1.0:initial-scale=1.0
因此我们可以通过计算initial-scale来决定页面显示的时候缩放到什么比例是正好充满屏幕宽。
可以通过js获取body的实际宽度:
document.body.scrollWidth
然后根据我们自己webview的宽度,就可以得到期待的initial-scale了:webViewwebView.frame.size.width/pageWidth;
下边来说具体怎么在iOS项目中实现:
第一步:js必须是在html加载完成后才能调用,因此在iOS项目中,需要先载入一次原始的html:
//html是否加载完成
isLoadingFinished = NO;
//这里一定要设置为NO
[self.webView setScalesPageToFit:NO];
[self.webView loadHTMLString:currentMail.htmlBody baseURL:nil];
//第一次加载先隐藏webview
[self.webView setHidden:YES];
self.webView.delegate = self;
第二步:第一次载入偷偷载入完成后,在代理里边调用js获取宽度,然后算出合适的缩放比例,并在<head>里加上我们需要的<meta>,然后再将新的html重新加载,加载完成后再显示:
#pragma mark - UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
//若已经加载完成,则显示webView并return
if(isLoadingFinished)
{
[self.webView setHidden:NO];
return;
}
//js获取body宽度
NSString *bodyWidth= [webView stringByEvaluatingJavaScriptFromString: @"document.body.scrollWidth "];
int widthOfBody = [bodyWidth intValue];
//获取实际要显示的html
NSString *html = [self htmlAdjustWithPageWidth:widthOfBody
html:currentMail.htmlBody
webView:webView];
//设置为已经加载完成
isLoadingFinished = YES;
//加载实际要现实的html
[self.webView loadHTMLString:html baseURL:nil];
}
//获取宽度已经适配于webView的html。这里的原始html也可以通过js从webView里获取
- (NSString *)htmlAdjustWithPageWidth:(CGFloat )pageWidth
html:(NSString *)html
webView:(UIWebView *)webView
{
NSMutableString *str = [NSMutableString stringWithString:html];
//计算要缩放的比例
CGFloat initialScale = webView.frame.size.width/pageWidth;
//将</head>替换为meta+head
NSString *stringForReplace = [NSString stringWithFormat:@"<meta name=\"viewport\" content=\" initial-scale=%f, minimum-scale=0.1, maximum-scale=2.0, user-scalable=yes\"></head>",initialScale];
NSRange range = NSMakeRange(0, str.length);
//替换
[str replaceOccurrencesOfString:@"</head>" withString:stringForReplace options:NSLiteralSearch range:range];
return str;
}
效果如下:
- 大小: 152.7 KB
- 大小: 169.4 KB
分享到:
相关推荐
根据加载的html内容,自适应高度
根据加载的html内容,自适应高度
之前提到UIWebView使用一个UIScrollView对象来关联web页面的内容,通过UIWebView的scrollView属性即可获得该对象,默认情况下网页长度超出设备视口长度后页面会滚动,用户使用手指滚动页面到页面边距并放开手指后...
IOS开发中因为引入cocos2dx,导致代码审核不通过无法提交( Apple will stop accepting submissions of apps that use UIWebView APIs )。该问题的解决方案有两种:1)升级Cocos2dx的版本,在查看Cocoas官网及Cocoas...
UIWebView+html+css,实现UIWebView中可点击链接,并且可显示gif动画效果
UIWebView和js交互 里边自己写了个H5方便大家理解
使用UIWebView和JS进行交互,可以OC操作js,也可以JS对OC进行交互
UIWebView原生与H5交互,pre;confirm;等包含三个H5页面跳转的交互demo
UIWebView与JS交互小例子,其中涉及APP向JS提交信息,和JS提交信息给App
UIWebView Web 网页 Demo 代码
UIWebView实现图文混排
ITMS-90809: Deprecated API Usage - New apps that use UIWebView are no longer accepted. Instead, use WKWebView for improved security and reliability. Unity IOS审核被拒,解决办法,去网上看了好多帖子,...
这是iPhone开发之UIWebView示例程序,具体参考: http://blog.csdn.net/htttw/article/details/7888557
这是我在学习ios的过程中写的一个demo,使用UIWebView实现一个简单的浏览器
网页视图的基本使用,网络资源地址字符串的处理,UIWebView属性与协议的综合使用;
iOS UIWebView URL拦截.pdf
(OC)(UIWebView)新闻详情
完美的webView,不懂UIwebView的可以看看
uiwebview播放视频 iphone开发 ,一个demo
IOS自定义请求uiwebview的loading框 支持文字和转圈特效同时存在 动态显示 调用方便