パソコン画面で確認すると横スクロールが発生するが、スマホサイトやディベロッパーツールで確認すると横スクロールが発生しないサイトについて

Question

サイト制作の勉強のため、あるサイトを模写していました。

そのサイトは他の人も模写しており、他の人が模写したサイトを見たのですが、
他の人が作ったサイトはパソコン画面で確認すると、
画面サイズの大小にかかわらず、若干ですが横スクロールが発生し、
デザインが一部崩れていました。

ところがスマホでその他の人のサイトを見ても横スクロールが発生しないのです
またパソコンであっても、ディベロッパーツール上に表示されるサイトは
横スクロールが出ませんでした。

どうやったらこのようなことができるのか、方法を知りたいです。
overflow:hidden;が使われているようではないようですし
（hiddenを使うのならパソコン画面でも使うと思います）、
スマホやパソコンといった機器ごとに設定を変えているのでしょうか？

やり方を知ったところで、別に横スクロールが発生するサイトを作ろうとは思いません。

けれど今回の模写をするときに、わたしも横スクロールで苦労させられたので、
なんだかモヤモヤした思いが残り、そのため質問してみました。

可能性の話でかまいませんので、思いつく方法があれば教えてください。
よろしくお願いします。

Answer 1

可能性の話でかまいませんので、思いつく方法があれば教えてください。

とりあえず思いついたのは下記。

body {
  width: 100%;
}

その現象の出ているサイトのURLを提示してもらえれば検証しようもありますが、現状の情報だけでは雲をつかむような話です。

Comments

[cheshire-cat]

回答、ありがとうございます。

今回の問題は私個人が気になっているだけで、別段重大な問題というわけでもありません。
またサイト制作者にとっても、サイトを公開しているとはいえ、まったく無関係な第三者にあれこれ言われるのは気分のいいものではないでしょう。

それでサイトのURLは提示しませんでした。ご了承ください。

Answer 2

ご存知かもしれませんが、メディアクエリを使用して、画面幅に応じたスタイル（CSS）を適用することが可能です。

使用されているCSSの中身に「@media ... min-width: ...」のような記載があれば、そこで制御している可能性がありそうです。

Comments

[cheshire-cat]

その可能性はありますね。

けれど仮にメディアクエリを使ったのであれば、
パソコンの画面を小さくしたときも横スクロールは発生しないはずです。

だから不思議に思っています。

[plasticgrammer]

まずは使用されているCSSを確認して、そこから可能性を追ってみるのが良いかと思います。

ある要素の幅がフォントサイズに依存していたりして(単位がrem,em)、それが関係している可能性もあるかと。

[cheshire-cat]

わかりました。やってみます。