[Semantic UI]inputのフォーカス時にズームさせない

2020年12月20日

PC/スマホ両対応でWebサイトを作っていると必ずぶち当たる「iOSでinputフィールドを選択すると、勝手にズームする問題」の解決法です。
Semantic UIなどのデザインフレームワークを使っている場合の注意点も合わせて書き記しておきます。

基本的には、
– viewport指定
– inputフィールドのfont-sizeを16px以上に
でinputフォーカス時にズームするのを避けることができます。

viewport指定

head内

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0">

inputフィールドのfont-sizeを16px以上に

シンプルに、

input[type=text] {
    font-size: 16px;
}

と書くだけでは、Semantic UIなどのデザインフレームワークを使っている場合、フレームワークの設定が反映されてしまいます。

CSSの優先順位を考慮して書く

以下のように、詳細に指定して書きます。

custom.css

.ui.form input[type=text] {
    font-size: 16px;
}

「uiクラスの中のform要素の中のinput(typeがtext)のフォントサイズを16pxにする」という指定なので、Semantic UIの指定と同等の優先度になります。

head内の読み込み順も適切に

優先度が同等の場合はあとから出てくる記述が優先されるため、head内の読み込み記述もフレームワークの読み込み→カスタムCSSの順にします。

# NG
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='custom.css')}}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='semantic/out/semantic.min.css')}}">

# OK
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='semantic/out/semantic.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='custom.css')}}">

これで無事、inputフィールドにフォーカスしてもズームしなくなりました。

参考

開発CSS, iOS, iPhone, Semantic UI