`

UIWebView自适应宽度

    博客分类:
  • iOS
 
阅读更多
  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
4
0
分享到:
评论
1 楼 Joyceitoyo 2015-12-23  
我试了怎么不好使,着急找中, 希望给与帮助  2219221403

相关推荐

    自适应文本内容的label

    对于Label,可以设置相关的约束,如最小宽度、最大宽度,以及与父视图或其他视图的关系,以便自动扩展或收缩。 2. **Dynamic Type**:苹果的Dynamic Type允许用户自定义字体大小,这对有视觉障碍的用户非常友好。...

    highchart-ios:ios uiwebview 上的 highchart

    可以通过设置图表的宽度和高度,或者使用百分比单位来实现自适应布局。 6. **兼容性问题**:尽管Highcharts通常对大部分现代浏览器有良好的支持,但在iOS的UIWebView中,可能需要注意一些特定的兼容性问题。比如,...

    iOS使用WKWebView加载HTML5不显示屏幕宽度的问题解决

    需要注意的是,虽然UIWebView在较新版本的iOS中已被废弃,但上述提及的ScalesPageToFit属性是用于旧版的UIWebView的,而WKWebView则需要通过其他方式来确保页面的宽度自适应屏幕。 总结来说,要解决WKWebView加载...

    iphone 应用实现屏幕滚动字幕

    在使用AutoLayout时,需要设置`UILabel`的约束,使其宽度等于`UIScrollView`的宽度,高度自适应。同时,`UIScrollView`的宽度应等于屏幕宽度,高度根据需求设定。当文本改变时,更新`UILabel`的约束,使contentSize...

    瀑布流 swift版

    瀑布流布局的特点是每个元素的宽度固定,而高度根据内容自适应,随着页面滚动,新的元素会填充到之前的空白区域,形成一种类似瀑布下落的效果。Swift中实现瀑布流通常有两种方法:一是利用UICollectionView自定义...

    html的原生解析与排版资源

    流体布局使用百分比宽度实现自适应屏幕大小。响应式设计利用媒体查询(`media queries`)针对不同设备和视口大小调整布局。 六、性能优化 在iOS中显示HTML内容时,需要注意性能优化。比如,避免加载大量数据或大...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    媒体查询 CSS媒体查询允许开发者基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。 GCF 谷歌内嵌浏览器框架, 使用此插件,用户可以通过Internet Explorer的用户界面,以Chrome内核的渲染方式...

Global site tag (gtag.js) - Google Analytics