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

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

2013年5月23日

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

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

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

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

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

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

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

-webkit-appearance: none;

を追加する。

この記事をシェアする