首先描述下遇到的问题：我们的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; 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来算我觉得不太好。
网友评论