レスポンシブサイトで、スマホ表示が機能しない

ヨコヤマさん (2021-05-14 11:37:45) w-orange.net/demo04/hc/mailform/example.html

お世話になります。早速、質問させてくださいませ。
レスポンシブサイトで、スマホ表示になるとメールフォームが機能しません。入力もできない状況で、カーソルを合わせても変化しません。スクロールはするので固まってるわけではなさそうです。実機(PC、スマホ、iPad)で確認してみるのですが、いずれも実機によるものではなく、スマホ表示にすると動かないといった状況です。(例)iPadでPC表示→正常に動く・PCでスマホ表示→動かない等。ResponsiveWeb.jsの設定が原因かとも思ったのですが、有効無効を切り替えても、症状は変わらないようです。また、サーバーが原因かと思い、別サーバーでも試してみたのですが、同じ症状になります。お忙しいところ恐縮ですが、原因分かりますでしょうか?よろしくお願いいたします。

CSSがなんか変です

和田憲幸 (2021-05-14 11:43:36) www.synck.com

CSSがなにか変な感じです。
一度、ダウンロードしたばかりの標準のCSSでお試しいただけますでしょうか。
mailformpro.cssというファイルのものになります。

元のCSSファイルに差し替えました。

ヨコヤマさん (2021-05-14 11:48:00) w-orange.net/demo04/hc/mailform/example.html

早速、ありがとうございます!取り急ぎ、元のCSSファイルに差し替えました。よろしくお願いします。

どうでしょうか、正常に動きましたでしょうか

和田憲幸 (2021-05-14 11:53:38) www.synck.com

上位階層でhtaccessなどでスマートフォンのアクセスをRewriteEngineなどでなにかしている場合、うまく動作しない場合がありますので、そちらもあわせてご確認ください。

変わらないようです。

ヨコヤマさん (2021-05-14 11:58:11) w-orange.net/demo04/hc/mailform/example.html

上位階層のhtaccessは、スマホに関する記述はないのですが、一応、削除してみました。しかしながら、症状は変わらないようです。お手数をおかけします。

スマホで確認する場合は

和田憲幸 (2021-05-14 12:03:06) www.synck.com

プライベートモードあるいはシークレットウィンドウでキャッシュが無い状態でご確認を再度お試しいただけますでしょうか。

症状回復しました!

ヨコヤマさん (2021-05-14 12:08:18) w-orange.net/demo04/hc/mailform/example.html

キャッシュが邪魔してたようです!うまく動作するようになりました。これは、mailformpro.cssで誤動作が生じていたとみて間違いないのでしょうか。

はい。おそらくは~

和田憲幸 (2021-05-14 12:15:01) www.synck.com

mailformpro.cssの一部を削ってご利用いただいていたと思うのですが、削ってはいけない部分も削ってしまったために操作不能な感じになってしたのではないかなと。先程のファイルであればloading_screenみたいなIDのオブジェクトを隠すスタイルが消えていたようなので、それを戻すだけでも動くかもしれません。

ありがとうございました!

ヨコヤマさん (2021-05-14 12:22:26) w-orange.net/demo04/hc/mailform/example.html

なるほどです。ありがとうございました。原因が判明してほっとしました。これまで幾度か使わせていただいて、初めての症状でしたが、自分の手には負えなかったので、質問させていただきました。今後は、mailformpro.cssも注意しながら、カスタマイズしてまいります。お手数をおかけしました。今後ともよろしくお願いします!