下記ブログの転載です!
https://rc-code.info/ios/post-236/
iOSの**WKWebViewConfigration
に設定するWKPreferences
のminimumFontSize
**が効かないケースがあったので調査&備忘録。
WKWebView の使い方
**WKWebView
**の基本的な使い方に関しては こちら にまとめております。
合わせてご覧ください。
WKPreferences minimumFontSize の設定方法
WKPreferences
はWebビューの基本設定をカプセル化するオブジェクトです。(公式ドキュメント)
このうちminimumFontSize
はptサイズでフォントの最小サイズを決めるプロパティです。
まずは使い方を記載します。
import UIKit
// ① WebKit の import
import WebKit
class ViewController: UIViewController {
var webView: WKWebView!
override func loadView() {
// ② WKWebViewConfiguration の生成
let webConfiguration = WKWebViewConfiguration()
// ③ WKPreferences の生成
let preferences = WKPreferences()
// ④ WKPreferences の minimumFontSize プロパティに値を指定
preferences.minimumFontSize = 100.0
// ⑤ WKWebViewConfiguration に WKPreferences のインスタンスを設定
webConfiguration.preferences = preferences
// ⑥ WKWebView に Configuration を引き渡し initialize
webView = WKWebView(frame: CGRect(x: 150, y: 200, width: 200, height: 20), configuration: webConfiguration)
// ⑦ view に WKWebView を割り当て
view = webView
}
override func viewDidLoad() {
super.viewDidLoad()
loadView()
webView.load(URLRequest(url: URL(string: "https://www.apple.com/")!))
}
}
上記のように、まず**WKPreferences
のインスタンスを生成し、このプロパティであるminimumFontSize
に最小サイズにしたいフォントサイズをpt換算**で指定します。
そして**WKPreferencesインスタンス
をWKWebViewConfiguration
にセットし、このWKWebViewConfiguration
をWKWebView
**の設定として使います。
minimumFontSize が効かないケース
さて本題ですが、このWebViewで様々なサイトを見てみると、**minimumFontSize
**を設定しているにも関わらず、指定フォントサイズ以下なってしまう場合が見受けられます。
検証した結果、この事象にはCSSの**text-size-adjust
**というスタイルが影響していることが分かりました。
text-size-adjust スタイルとは?
text-size-adjust
(ベンダープレフィックスだと**-webkit-text-size-adjust
**) は、一部のデバイスで使われるテキストの自動拡大アルゴリズムを制御するスタイルです。
対応していないブラウザーはこのプロパティを無視します。
一部のモバイル端末には、縦向き (Portrate) と横向き (Landscape) が切り替わった際に文字サイズを自動調整する機能があり、**text-size-adjust
**はこの自動調整を制御します。
text-size-adjust が設定されると minimumFontSize が効かなくなる
検証を行なった結果、text-size-adjust
によって縮小されたサイズはminimumFontSize
によって制限されたフォントサイズよりも小さくなることが分かりました。
念の為、その他のスタイル指定でフォントサイズの制限が無視されないか検証しています。
検証内容
最下部 Playground の Resources ディレクトリに様々なスタイル定義によるフォントサイズ変更を含んだHTMLファイルを用意しました。
**minimumFontSize
を設定した WKWebViewにて、このHTMLをそれぞれ表示した結果、text-size-adjust
を設定したHTMLのみ、minimumFontSize
**で指定した値よりフォントサイズが小さくなりました。
下記画像が、**minimumFontSize
に100
を設定し、上部テキストに様々なスタイル定義で40px
**相当のフォントサイズを指定した画像です。
下記テキストは比較用のプレーンなテキストです。
見た通り、スタイルで指定された**40px
を無視し、minimumFontSize
に指定されている100pt
**相当の大きさで表示されています。
変わって次の画像が**text-size-adjust
**にを指定した時の画像です。
こちらの上部テキストでは、スタイルで指定された**40px
が無視され、minimumFontSize
に指定されている100pt
が適用されるはずですが、text-size-adjust
に指定している10%
が適用され、4px (40pxの10%)
**相当の大きさになっています。
まとめ
全ての要素・スタイルを検証できているわけではないので確実ではないですが、**WKPreferences
のminimumFontSize
を指定しているのにフォントが想定以下のサイズになってしまうようであれば、text-size-adjust
**の設定を疑ってみるのが良いかもしれません。
検証Playground
検証環境
Mac: 10.13.6
XCode: 10.1
Swift: 4.2.1
参考ドキュメント
WebKit
WKWebViewConfiguration
WKPreferences
text-size-adjust