飛騨高山 さんぽ道飛騨高山さんぽ道

iPhoneのサファリでinputが画面をはみだした時の対処法(備忘録)

(投稿日:

WordPress でContact Form 7 を使って『お問い合わせ』ページを作った際、PCではきれいに表示されるけどiPhone のSafariでは入力欄が画面をはみ出してしまいました。
(今まではこんな事は無かったのに今回は何故だ!?)
ちなみにiPhone でもGoogle Chrome ではきちんと表示されます。

入力欄の『input』にCSSを付けてもダメで、結局、iPhoneのSafari 用にCSSにメディアクエリを付けたら希望通りになりました。
ーーーーーーーーーー

/* iPhoneのSafariに適用されるスタイル */
@media only screen and (max-device-width: 414px) and (-webkit-min-device-pixel-ratio: 2) {
/* 画面幅が414px以下でかつRetinaディスプレイの場合に適用 */
/* ここにスタイルを追加 */
.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
max-width: 100%;
}
}

ーーーーーーーーーー
実はこれ、ネット検索して色々試してもダメだったので『ChatGPT』で質問した回答を元にコードを書きました。
※『/* ここにスタイルを追加 */』の下のスタイルを追加しました。
以前の『ChatGPT』って、こうしたコードも書けると言われていましたが、実際には使えないものでした。

現在、Ver.3.5 になって割と使えるコードを表示してくれるようになった気がします。。。

 

あと、今回Wordpress のテンプレートを作っている途中、チャンと動作しないプラグインがいくつかありました。(自分のミスでしたが・・・。)
『PDF Embedder』でPDFファイルがリンク表示になるとか、『Custom Post Type UI』でカテゴリーがチェックじゃなくてタグのような指定方法になっていて、『何でだろう???』と思ってテンプレートを再チェックしてたら『footer.php』で『wp_footer() 』が記載されてないことが判明しました。
これは他のコードを削除した際に、間違えて一緒に消してしまったようです。。。

このために随分無駄な時間を過ごしてしまいました。 反省・・・。