《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];
  1. 使用上面任一方法，就可以解决页面在手机浏览器中不能捏合缩放的问题了。

3 引用

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