1:ID:6znmLe · 2019-05-12

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

いいね! 7 あとで

7 件の回答

時系列表示 — 階層表示

2:ID:ntIe.S · 2019-05-12

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

3:ID:7OnWyd · 2019-05-12

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

1いいね!

4:ID:O19XPY · 2019-05-13

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

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

5:ID:FiTSoj · 2019-05-13

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

1いいね!

6:ID:4VJ0Ni · 2019-05-14

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

7:ID:rvnDvB · 2019-05-17

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

8:ID:主 · 2019-05-18

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

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

7 件の回答

一緒に読まれている質問