8
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【Swift】WKWebViewのピンチイン/ピンチアウト(拡大縮小)を無効にする

Last updated at Posted at 2018-02-19

#環境
xcode9
swift4

#はじめに
二本指でズームイン/ズームアウトをさせたく無かった(webViewに対して)のですが、日本語の良い記事がなかったので書きます!

#参考サイト
WKWebViewの導入についてはこちらを
Apple開発者向けページ
拡大縮小について
[スタックオーバーフロー]
(https://stackoverflow.com/questions/25553711/disable-magnification-gesture-in-wkwebview)

#実装

ViewController.swift
import UIKit
import WebKit

class MyViewController : UIViewController, WKUIDelegate {
    var webView: WKWebView!
    
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let myURL = URL(string: "https://www.apple.com")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
        webView.scrollView.delegate = self
    }
}

// 拡大縮小を無効にできたが、キーボード出現時に入力フォームが隠れてしまったので、下記html側で対処するべきでしょう
extension MyViewController: UIScrollViewDelegate {
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return nil
    }
}

#これを導入することによりできたバグ
フォームなど入力する際にキーボードが出てくると、入力フォームが隠れてしまう事象が発生しました。解決したら、追記か別記事で書こうと思います。

webViewで表示するhtmlなどのmetaタグに

index.html
user-scalable = no

つければいけそう(未検証)
検証次第更新します

解決したので更新します!

index.html
<meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

を追加することでWKWebView内における拡大縮小を無効にすることができました。

こちらを参考にさせて頂きました。
safariでは拡大縮小を無効にすることはできなくなったようですね。
https://qiita.com/uupaa/items/8e1cfe239974ac58b51e
https://developer.apple.com/library/content/releasenotes/General/RN-iOSSDK-10.0/

8
4
4

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
8
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?