【簡単】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以上でデザイン・コーディングした方が良いですね。

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

Ads

関連記事

WordPress プログラミング

ワードプレスのRSSフィードでサムネイル画像(アイキャッチ)を取得する方法【簡単】

2020.05.27
415
プログラミング

htaccessを使ってhttpからhttpsへリダイレクトさせる方法

2022.04.15
15
HTMLCSS

CSSだけでborder線にグラデーションを入れる方法【角丸も付ける】

2022.06.17
43
JavaScript プログラミング

開閉するアコーディオンリストがあり、一つ開いたら、他の開いていたのを閉じさせる方法

2020.07.15
731