片方のページのみ固定メニューが画面幅を超えている

対象ページ

①正常
https://xn--wlr53q.net/zouge_shuryo.html

②画面幅を超えている
https://xn--wlr53q.net/wordOfMouth.html

現状

②をモバイルで表示すると、画面下部に固定で表示しているメニューが画面幅を超えてしまっており、
ページ全体が横揺れするような状態になってしまっています。

例）画面幅が375pxのデバイスの場合のメニュー幅
①375px
②381px
※サイズはPCのChromeのデベロッパーツールで確認

不具合を確認した環境

iOS最新版　Safari
iOS最新版　Chrome

解決したいこと

①と同様に固定メニューが画面幅を超えないようにしたいです。

①と同じCSSを使用しているので、画面幅を超えるはずはないので、何が原因かわかりません。

CSSの遅延読み込みを設定しているので、ファーストビュー表示用のstyleをページごとに表示しています。
これが原因かと思い、試しに削除してみましたが変わりませんでした…。

その他は思い当たる節がありませんので、詳しい方はご教授して頂けますと幸いです。

よろしくお願い致します。

Lhankor_Mhy

2019/05/21 00:41

iOS12 Safari iPhoneSEで確認しましたが、「画面下部に固定で表示しているメニューが画面幅を超えてしまって」という問題が再現しませんでした。フローティングメニューのことですよね？

yokoyamax

2019/05/21 02:59

ご回答ありがとうございます。 https://gyazo.com/82c14b16e17acae26a2c86d01995ff65 「最大割引50％OFF」などのブロックです。上記のキャプチャのようにブロックの幅が画面幅というか、その他要素の幅を超えてしまっており、横揺れしています。問題の箇所はおそらく間違いないかと思いますが、もしかすると別の原因かもしれません…。

Lhankor_Mhy

2019/05/21 03:04

ああ、そういうことですか。問題を確認しました。

行動規範の内容に同意します

回答1件

ベストアンサー

これでどうでしょう。

HTML
1<ul style="list-style:none;margin:0px;padding:0px;">
2<li style="width:100%;padding:10px;box-sizing: border-box;"><img src="./img/hankopure.png" alt="印鑑・実印通販サイトの口コミ"></li>
3<li style="width:100%;padding:10px;box-sizing: border-box;"><img src="./img/yuubi.png" alt="印鑑・実印通販サイトの口コミ"></li>
4</ul>

投稿2019/05/21 03:30

Lhankor_Mhy

総合スコア36074

yokoyamax

2019/05/21 05:30

ありがとうございます！正しく表示されました！よろしければ、なぜここが問題とわかったのかなど、解説していただけますでしょうか？今後に活かしたいと思います。

Lhankor_Mhy

2019/05/21 05:36

ご解決されて何よりです。問題の箇所は、地道にひとつひとつ調べて発見しました。具体的には、原因となる箇所を知るために、開発者ツールを開いて怪しそうなところを削除し、横幅に変化が出るかを確認し、ということを繰り返しました。コツは、最初のうちは大きめに削除（たとえば上半分）して、原因の箇所を少しづづ小さく絞り込んでいくことです。

yokoyamax

2019/05/21 06:18

＞コツは、最初のうちは大きめに削除（たとえば上半分）して、原因の箇所を少しづづ小さく絞り込んでいくことです。開発ツール・Consoleなどは見ていたのですが、固定メニューの幅が超えていた時点でここが原因だと決めつけてしまっておりました… ご教授頂いた方法であれば、1/2を繰り返しいくイメージかと思いますので、私でも実践できそうです。ありがとうございました。

行動規範の内容に同意します