ジユウメモメモ

当サイトは通販サイト・外部Webサービスへのリンクの一部にアフィリエイト広告を使用しています

iPhoneのSafariでフォームをタッチした時に画面をズームさせない方法

ズームしなくていいのに!そんなときのスタイルシート

レスポンシブレイアウトのサイトをiPhoneから見た時に、サイト内に配置したプルダウンメニューやテキストエリアをタッチすると画面がズームされてしまうのを防ぐ方法メモ。

参考になったのはこちらの記事。

BALLOG:iPhoneでフォームへのフォーカス時に自動ズームしてしまう現象について

リンク先の記事ではinputのfont-sizeを16pxに設定する方法が書かれていたけど、select、textareaも同じ方法で対応できた。

input,select,textarea{
   font-size:16px;
}

Mobile Safari絡みのform関連ではこちらの記事も参考になった。Mobile Safariが気を利かせてボタンをデザインしてしまうのを解除する方法。

コリス:[CSS]iPhone(Mobile Safari)でsubmitのテキストがずれた時の対応方法

Mobile Safariによるデザインを解除したいときはスタイルシートに

-webkit-appearance: none;

を追加する。

タグ: