LuxeritasでiPhoneのフォームにフォーカスしたときズームしないようにする方法

2017年7月19日2017年7月20日Wordpress

カゴブロでは、WordPressテーマ Luxeritas を利用しています。

昨日、Luxeritas 2.2.0へのアップデートが公開され、

という項目がありました。

LuxeritasではiPhoneからアクセスしたときに入力フォームにフォーカスするとズームしてしまっていました。

具体的には、サイドバーウィジェットでの検索フォーム、コメント欄での名前・メールアドレス・ウェブサイトの入力フォーム、トラックバックURLのフォームです。

検索周りつながりということでフォーカスしたときに画面がズーム（拡大）されてしまうのを修正する方法を共有しておきます。

Luxeritasの子テーマのCSSに追記

CSSを編集するだけで解決しますので簡単です。

追記するCSS

iPhoneではinputフォームのフォントサイズが16px未満だと、フォーカスしたときにズームされる仕様です。なのでinputフォームのフォントサイズに16pxを指定してやります。もちろん17pxでも、18pxでも、それ以上でもかまわないです。

参考▼

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

最近のviewport指定タッチデバイス用のviewport指定として、user-scalable=no にしない（ユーザの操作 ...

 http://qiita.com/volkuwabara/items/b285cc312587c73a4812

以下を追記。

.search-field:placeholder-shown,
textarea,
input {
  font-size: 16px;
  font-size: 1.6rem;
}

もっと簡単な記述や、抜けがありましたらコメントよりお教えください┏○ﾍﾟｺ

子テーマのCSSの編集

CSSの編集の仕方がわからない方は、この記事を見てない気もしますが。

管理画面のLuxeritas > 子テーマの編集 > style.css から編集すると、FTPとか使わなくていいので手順は一番少ないです。

どなたかの参考になれば幸いです┏○ﾍﾟｺ