都說WKWebView性能很好，然而WKWebView上的坑也不少，特別是在低版本系統(tǒng)中。最近在開發(fā)中就遇到了頁面縮放問題。
寫了一個簡單的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上，就出現(xiàn)問題了。頁面為了顯示所有字符內(nèi)容，把整個頁面縮小了。貌似這是瀏覽器的行為，但是這樣非常難看。如下圖所示：
自動縮放情況下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中所有顯示內(nèi)容的外面套一層<div></div>標簽就可以了。
添加<div></div>標簽后在iOS 9.0 WKWebView上顯示內(nèi)容如下所示，顯示正常了。
修改后H5頁面顯示
