《iOS三问》 -- 解决web页面在WebView中不能捏合缩放的问题

今天突然发现我的博客在手机浏览器里居然不能缩放,导致一些图片在手机上显示得较小根本看不清,经过一翻搜索,原来是页面html中的meta没有写相应的scale参数导致。

1 解决方法1 - web端在HTML页添加相应的meta参数

在HTML的header标签中添加:

使页面支持缩放的meta
1
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=.5,maximum-scale=3"/>

2 解决方法2 - app端给UIWebView使用Hook添加meta参数

- (void)webViewDidFinishLoad:(UIWebView *)webView方法中注入下面这段js代码.

UIWebView使用Hook添加meta参数
1
2
3
NSString *jsMeta = [NSString stringWithFormat:@"var meta = document.createElement('meta');meta.content='width=device-width,initial-scale=1.0,minimum-scale=.5,maximum-scale=3';meta.name='viewport';document.getElementsByTagName('head')[0].appendChild(meta);"];

[_webView stringByEvaluatingJavaScriptFromString:jsMeta];

使用上面任一方法,就可以解决页面在手机浏览器中不能捏合缩放的问题了。

3 引用

【1】Lea_DongYang - 《ios UIWebView捏合放大缩小的实现》

坚持原创技术分享,您的支持将鼓励我继续创作!