Help us understand the problem. What is going on with this article?

iOSでinputのフォーカス時に画面がズームするのを防ぐ

More than 3 years have passed since last update.

最近のviewport指定

タッチデバイス用のviewport指定として、user-scalable=no にしない(ユーザの操作の任意性を奪わない)ことが最近では推奨されるようになっています。

ガチガチ
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
最近の推奨
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

悩ましい点

iOSでは、input要素に指定しているフォントサイズが「16px」を下回ると、フォーカス時にズームされる という仕様があります。入力し終わった時や、入力をキャンセルしたときにズームしたままなので、ユーザがピンチアウトして等倍に戻さないともとの見た目に戻りません。特に position: fixed; しているパーツがあると、正しく操作できない可能性もあります。
かと言って、16pxにすると大きすぎる!というデザイン的な事情もあるかも知れません。

解決策

力技ですが、font-size: 16px; はしておきつつ、transform:scale() で縮小表示すると、iOS側には「16pxですよ」と示しつつ、見た目はコンパクト、ということが実現できます。

input[type=text] {
  font-size: 16px;
  transform: scale(0.8);
}

注意

ただし「16pxより小さい文字のフォームパーツは操作時/入力にズームさせないと見づらい」という思想は正しくもあるので、背く場合は操作性のチェックは必要です。

skwbr
Director / Designer
1pac
「デジタル・インタラクティブ領域」に強みをもち、クライアントの課題解決のための仕組みづくりをサポートするクリエイティブプロダクションです
https://1pac.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away