iOS 9.0 WKWebView自适应缩放问题解决方案
2018-08-03 本文已影响0人
frog78
都说WKWebView性能很好，然而WKWebView上的坑也不少，特别是在低版本系统中。最近在开发中就遇到了页面缩放问题。
写了一个简单的H5页面，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
</head>
<body>
<header>
<a class="back" href="javascript:;"></a>
<h1>get information (获得应用和设备信息)</h1>
</header>
<div class="content-card">
<p>● 点击下方按钮获得应用和设备信息</p>
<a class="button button-blue" id="appInfo">应用信息</a>
<div class="appInfo">
</div>
<a class="button button-blue" id="deviceInfo">设备信息</a>
<div class="deviceInfo">
</div>
</div>
</body>
</html>
用WKWebView加载该H5页面，点击应用信息或者设备信息按钮时，在下方的div中显示获取到的相关信息。可以看到，显示的信息字符的长度超过了屏幕宽度，但是可以通过滚动滚动条来查看。这是正常的。如图所示：
正常情况下H5页面显示
但是在iOS9.0上，就出现问题了。页面为了显示所有字符内容，把整个页面缩小了。貌似这是浏览器的行为，但是这样非常难看。如下图所示：
自动缩放情况下H5页面显示
这样确实很难看。那么有没有办法让页面不缩放呢？
刚开始的时候，觉得这个肯定是浏览器的行为，所以把WKWebView的属性以及代理方法研究了一遍，各种设置，如禁止UIScrollView缩放等试了个遍，都不能解决这个问题。后来才意识到，可以在H5上面下点功夫。其实在H5上做一点小改动，就能解决问题，下面分享一下这个解决方案。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
</head>
<body>
<header>
<a class="back" href="javascript:;"></a>
<h1>get information (获得应用和设备信息)</h1>
</header>
<div class="content">
<div class="content-card">
<p>● 点击下方按钮获得应用和设备信息</p>
<a class="button button-blue" id="appInfo">应用信息</a>
<div class="appInfo">
</div>
<a class="button button-blue" id="deviceInfo">设备信息</a>
<div class="deviceInfo">
</div>
</div>
</div>
</body>
</html>
没错就是在Html5中所有显示内容的外面套一层<div></div>标签就可以了。
添加<div></div>标签后在iOS 9.0 WKWebView上显示内容如下所示，显示正常了。
修改后H5页面显示
