自适应客户端代码
//这里一定要设置为NO
[self.webView setScalesPageToFit:NO];
//第一次加载先隐藏webview
[self.webView setHidden:YES];
self.webView.delegate = self;
- (void)webViewDidFinishLoad:(UIWebView *)webView
{ //修改服务器页面的meta的值
NSString *meta = [NSString stringWithFormat:@"document.getElementsByName(\"viewport\")[0].content = \"width=%f, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\"", webView.frame.size.width];
[webView stringByEvaluatingJavaScriptFromString:meta];
}
- //给网页增加utf-8编码
- [webView stringByEvaluatingJavaScriptFromString:
- @"var tagHead =document.documentElement.firstChild;"
- "var tagMeta = document.createElement(\"meta\");"
- "tagMeta.setAttribute(\"http-equiv\", \"Content-Type\");"
- "tagMeta.setAttribute(\"content\", \"text/html; charset=utf-8\");"
- "var tagHeadAdd = tagHead.appendChild(tagMeta);"];
- //给网页增加css样式
- [webView stringByEvaluatingJavaScriptFromString:
- @"var tagHead =document.documentElement.firstChild;"
- "var tagStyle = document.createElement(\"style\");"
- "tagStyle.setAttribute(\"type\", \"text/css\");"
- "tagStyle.appendChild(document.createTextNode(\"BODY{padding: 20pt 15pt}\"));"
- "var tagHeadAdd = tagHead.appendChild(tagStyle);"];
- //拦截网页图片 并修改图片大小
- [webView stringByEvaluatingJavaScriptFromString:
- @"var script = document.createElement('script');"
- "script.type = 'text/javascript';"
- "script.text = \"function ResizeImages() { "
- "var myimg,oldwidth;"
- "var maxwidth=380;" //缩放系数
- "for(i=0;i <document.images.length;i++){"
- "myimg = document.images[i];"
- "if(myimg.width > maxwidth){"
- "oldwidth = myimg.width;"
- "myimg.width = maxwidth;"
- "myimg.height = myimg.height * (maxwidth/oldwidth);"
- "}"
- "}"
- "}\";"
- "document.getElementsByTagName('head')[0].appendChild(script);"];
- [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
其他html属性重载和此方法类似;
参考网址:
(stringByEvaluatingJavaScriptFromString的使用方法)http://www.uml.org.cn/mobiledev/201108181.asp
( iphone 获取UIWebView内Html方法)http://blog.csdn.net/diyagoanyhacker/article/details/6564897
(IOS UIWebView引用外部CSS样式)http://hi.baidu.com/jwq359699768/item/780879e5c98bfb3e4ddcaf22
http://blog.csdn.net/xdonx/article/details/6973521
下边来说具体怎么在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;
- }