Written by Kasumi

【簡単】iphone(ios)でinputタグをタップしたらズームされるのを回避する方法

iphone(ios)のsafariブラウザでフォームがあるページのinputタグにテキストを入力しようとすると勝手にズームされる。

PCのchrome検証ではズームされない。

ズームを解除したい。

本記事ではこのような疑問を解決します。

iphone(ios)でズームされる原因・改善

上記画像のように、ズームされる原因はiphone(ios)の標準ブラウザ、safariのユーザビリティが関係しています。

safariの機能として、inputタグのフォントサイズ(font-size)が16px以下だとズームされます。

CSSを使って、該当するinput要素をフォントサイズ16px以上にするとズームされずそのまま入力できます。

inputタグのフォントサイズを変えず、ズームを回避したい

input {
  font-size: 16px;
  transform: scale(0.8);
}

webデザイン上、inputタグのフォントサイズは変えずズームしないようにする場合は、CSSのtransform:scale();プロパティを使いましょう。

値にズームの拡大・縮小率を入れたら完成です。

まとめ

ユーザビリティを考えると、transformプロパティで無理やりフォントサイズを小さくして見せるのではなく、16px以上でデザイン・コーディングした方が良いですね。

以上で解説を終わります。

目次

関連記事

WordPress プログラミング

カスタム投稿タイプのターム(カテゴリー)の初期設定を変更する方法

2022.04.01
3289
HTMLCSS プログラミング

【簡単】inputタグで入力した内容の履歴・入力候補を出さない方法【属性を設定すれば解決】

2022.02.24
13949
WordPress プログラミング

【wordpress.orgにログインできず、プラグインの新規追加・外部へ接続する際の通信がうまくいかない】原因・解決方法を紹介

更新日:2022.10.19
6342
HTMLCSS jQuery

【簡単CSS・jQuery】上スクロール時のみヘッダー・ナビを固定表示する方法

更新日:2022.09.09
1889