-
1:ID:6znmLe · 1週間前

#質問 レスポンシブサイトを制作しています。
Chromeのデベロッパーツールでスマホ画面を確認しているのですが、
cssでwidth:100%としているものがツールのスマホ画面の横幅いっぱいに表示されず、左側1/3程度の範囲で表示されています。
これは、スマホで実際に見たときには、横スクロールが2画面分程度発生する状況ということなのでしょうか?

7 件の回答

2:ID:ntIe.S · 1週間前

詳細がわからないのであれですが、ページが画面外にはみ出しているのであれば、当然横スクロールが発生してしまうでしょうね。
デベロッパーツールだけでなく実機で確認したほうがいいですよ。

3:ID:7OnWyd · 1週間前

ソースないと何とも言えんよ

4:ID:O19XPY · 1週間前

背景画像だったら、background-size: cover; 当たりを調べると幸せになるかもしれない。

[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック
https://coliss.com/articles/build-websites/operation/css/css-responsive-full-background-image-by-sixrevisions.html

5:ID:FiTSoj · 1週間前

単純にwidth; 100%指定している要素の親要素の横幅が1/3ぐらいになっているんじゃない?

6:ID:4VJ0Ni · 1週間前

根本的にhtml/cssを理解されてない可能性が高いんじゃないかな。
cssにおける%は、相対的なものであって、画面幅などの絶対的なものに固定されてない。
単純に画面幅いっぱいを求めるなら、素直に100vw使えば解決だけど、cssの設計次第だからそれがベストプラクティスかどうかは謎。

7:ID:rvnDvB · 6日前

単に、ビューポート入れてない感…

8:ID: · 6日前

解決しました!
1/3表示になっている要素とは別の要素がデバイス幅以上のwidthになっていたことが原因でした。
別要素をデバイス幅まで縮小したらwidth100%なのに1/3表示になっていたものが、きちんと画面いっぱいに表示されるようになりました。
初歩的な質問で失礼しました、ありがとうございました。

コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る