ジユウメモメモ

気になるガジェットや映画のはなしをメモメモ

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;

を追加する。

タグ:
スポンサーリンク
この記事をシェアする