LoginSignup
2
2

More than 3 years have passed since last update.

WKWebView iOS11 以下の場合

Last updated at Posted at 2019-05-13

iOS11以下では WKWebView に load する HTML が 画面サイズより小さい場合に、ナビゲーションバーがあるとその分HTMLの開始位置と高さがずれてしまう。(HTML画面は小さいのにNavigationBarの高さ分スクロールできてしまう)
contentInset, contentOffset を調整してもうまくいかず以下で対応したのもメモ。

self.webView = WKWebView(frame: CGRect.zero, configuration: WKWebViewConfiguration())

if #available(iOS 11.0, *) {
} else {
    // レイアウトのバグ
    // ナビゲーションバーがあるときコンテンツの開始位置が調整されるが、HTML の高さが端末より小さい場合
    // 開始位置が調整された分コンテンツの高さが多くなりスクロールしてしまう。
    // コンテンツの高さが調整できないため、問題があるiOS11未満では潜りこみを回避する方法としている。
    // また、上記の際、実機でおかしな表示になるため、ナビゲーションバーを非透明とする。
    self.navigationController?.navigationBar.isTranslucent = false
    self.edgesForExtendedLayout = []
}

self.view.addSubview(self.webView)

self.webView.translatesAutoresizingMaskIntoConstraints = false
self.webView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 0).isActive = true
self.webView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: 0).isActive = true
self.webView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 0).isActive = true
self.webView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: 0).isActive = true

self.webView.loadHTMLString("""
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>
</head>
<body bgcolor="blue">
<div style="font-size:32px; word-wrap: break-word; color: red;">
test
</body>
</html>
""", baseURL: nil)

stackoverflow にもあった内容
UIWebView contentInset without extra height at bottom

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2