@mstock (Tak Miz)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

画面スクロール時にデザイン画面がずれる原因について

解決したいこと

下記サイトをスマートフォンでスクロールする際に、デザインされている画面(ページ)がデバイス画面に固定されていません。
こちらを解消する方法をご教示いただけないでしょうか。
https://www.stock-lab.com/

PCで閲覧する場合は問題なくスクロールされています。

その他、他の関連サイトにおいても同様のずれる事象が発生しており、マークアップされたソースコードを見たのですが原因がわかりませんでした。
バックエンドはPHPで作られているようですが、スクロールのずれはあくまでマークアップによる原因と考えております。
確認しているデバイス環境はIphone12です。

現在、エンジニアリングを学習始めたて故にHTML/CSSに関わる初歩的な質問で大変恐縮ですがよろしくお願い致します。

0 likes

2Answer

下記サイトをスマートフォンでスクロールする際に、デザインされている画面(ページ)がデバイス画面に固定されていません。

現象がよくイメージできないのですが,ページの横幅が画面にあっていないという解釈であっていますか?

0Like

このように横スクロールが発生しているという認識でよろしいでしょうか?

※分かりやすく赤くしています。
image.png

こちらですが、<ul class="g_nav u_clearfix">が原因のようです。
floatがなかったので.u_clearfixを使っている理由はわからなかったですが、とってもPC, スマホ共に影響なさそうだったので、上記のu_clearfixを削除すれば解決します。

0Like

Your answer might help someone💌