西门的后花园

一个热爱网络的年轻人的博客

iOS的WebView里,HTML内容自适应

首先描述下遇到的问题:我们的iOS APP商品详情页,下面商品文描部分是单独弄的一个WebView,里面放从接口获取到的文描html内容。文描html里主要有部分html标签,例如div、p、span、table、img等,还有文字和图片。出现的问题是WebView只显示一半图片,部分文字非常大,需要做优化。

我和iOS的开发一开始也都很愣逼,iOS开发说接口出来什么我显示什么,至于为什么这样,他也不知道;而我更愣逼,文描html也不是我录入进去的,iOS的WebView我又不懂,让我怎么调……

这里的分歧点,是他不懂html代码,我不懂iOS代码。没办法,我就问可否让我看看WebView是如何嵌入文描的,然后他就给我看了一段很重要的代码:[NSString stringWithFormat:@"<!DOCTYPE html><html><head><meta charset=\"UTF-8\"></head><body>%@</body></html>",fileStr]。这不就是html么,外层是html页面的框架,fileStr是文描内容。因为文描里只有div之类的代码,没有doctype,所以他们有同事这样套了下,让WebView里是一个完整的html页面,确实聪明。

这就好办了,既然是手机,肯定不能少viewport,果断加上viewport。因为文描内容很多地方宽度都写死了750px,所以我没有用最常用的width=device-width,而是直接用的width=750。[NSString stringWithFormat:@"<!DOCTYPE html><html><head><meta name=\"viewport\" content=\"width=750\" charset=\"UTF-8\"></head><body>%@</body></html>",fileStr]

iOS开发按照我提供的代码改了下,依旧只显示一半,不显示全部。然后我在文描里加入js,计算容器的宽度,发现宽度是对的,但就是没有全屏显示。只能Google了。

发现这个网友求助和我一样的问题,然后有人回答,加上webview.scalesPageToFit = YES;。我让iOS开发试试,发现完全可行!WebView立马就显示全部网页内容了!

最后就是解决图片自适应和英文、数字不换行等兼容问题,最终代码:

[NSString stringWithFormat:@"<!DOCTYPE html><html><head><meta name=\"viewport\" content=\"width=750, maximum-scale=1.5\" charset=\"UTF-8\"><style type=\"text/css\">.webview_ios{text-align:left;word-wrap:break-word}.webview_ios img{max-width:100%%}.webview_ios ul{padding:0}table{font-size:26px}</style></head><body><div class=\"webview_ios\">%@</div></body></html>",fileStr]

注:我这里加入了一些我自己需要的代码,例如文描需要放大1.5倍,所以加了maximum-scale=1.5;发现table默认文字会很小,就加了26px,其实全局加个默认字体或许会更好吧;这里面的代码%号会解析掉,所以要写100%%,是我测试过的。其他的建议各位让前端开发工程师来调整,不要按部就班我的代码,一些文章里用js来算我觉得不太好。例如这篇《WebView加载HTML图片大小自适应与文章自动换行》。我认为WebView和浏览器一样,页面里的内容要自适应,还是靠页面html结合css来处理会比较好。

评论列表

  1. 这个太专业了,简直无法细看。

  2. 好像代码有点乱。

  3. 😆 😆 😆 😆

s s进行回复 取消回复

分类目录