Googleデベロッパーツールでスマホサイズに表示されません

レスポンシブサイトを作成したいです。

ブラウザで表示幅を狭くしていくとレスポンシブになっているのですが、
Googleデベロッパーツールでスマホ表示させると、横スクロールが発生してしまい、
レスポンシブになっていません。

何か大きな勘違いをしていますでしょうか？

追記：
実は先日も質問したのですが、解決せず、コードをアップして再質問してみました。
時々、横スクロールが消え、思った通りのスマホ用表示になることがあります。
また、Firefoxのツールでは毎回必ずきちんとスマホ表示が出ます。

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4  <!-- Required meta tags -->
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
7  <link rel="stylesheet" href="css/error2.css">
8  <title></title>
9  
10</head>
11<body>
12
13
14
15<footer class="footer">&copy; 2020</footer>
16
17</body>
18</html

CSS
1* {
2box-sizing: border-box;
3}
4html, body,
5ul, ol, li,
6h1, h2, h3, h4, h5, h6, p, div {
7  margin: 0;
8  padding: 0;
9}
10body {
11  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
12  width: 100%;
13}
14
15.footer {
16	text-align: center;
17	background-color: #708090;
18	color: #fff;
19	padding: 7px;
20        width: 100%;
21}
22
23/* -------------------------------------------- */
24/* ▼タブレット用デザイン */
25/* -------------------------------------------- */
26@media screen and (min-width: 768px) {
27}
28
29/* ------------------------------------ */
30/* ▼PC用デザイン */
31/* ------------------------------------ */
32@media screen and (min-width: 1024px) {
33}
34

m.ts10806

2020/04/04 08:58

レスポンシブ用の指定が何もされてませんが、これで全てですか？

NAKAZAKI

2020/04/04 09:10

ご質問ありがとうございます。とりあえずコードが長くなるので、タブレットやPC表示用CSSは消しました。 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> だけで何とかなると思っていたのですが、フッターだけを記述してみても、フッターが中央より右に寄り、横スクロールが発生しています。ちなみに作成しているサイトはwidth: 100%の指定を忘れないようにしています。なぜ横スクロールが発生し、右側が見切れているのでしょうか？

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

回答1件

ベストアンサー

Chromeで、デベロッパーツール表示せずに画面幅を狭めたときの最小値は400pxです。

ブラウザで表示幅を狭くしていくとレスポンシブになっているのですが、

↑画面幅が400px以上

Googleデベロッパーツールでスマホ表示させると、横スクロールが発生してしまい、
レスポンシブになっていません。

↑画面幅が375pxなど

となってしまっているので、
「デベロッパーツールでスマホ表示させると、横スクロールが発生」してしまっているのかもしれません。

追記:
とりあえず、以下のどれかで横スクロールはなくなるかもしれません。

CSS
1html,
2body {
3  overflow-x: hidden;
4}

CSS
1html,
2body {
3  margin: 0;
4  padding: 0;
5  box-sizing: border-box;
6}

投稿2020/04/04 09:38

編集2020/04/04 10:01

new1ro

総合スコア4528

NAKAZAKI

2020/04/04 09:42

ご回答ありがとうございます。実はスマホだけでなく、iPad表示などでも横スクロールが発生している状態なのです…。もうお手上げ状態でして。

new1ro

2020/04/04 10:05 編集

暫定対応となりそうなCSSを追記しました。 (原因究明とは関係なく、横スクロールは出さないようにできるのでは、と思います。) ----- ↓以下、原因究明のための内容横スクロールが生じるシチュエーションでよくあるのが、ブレークポイントの前後で、ラッパー要素 (.containerなど) の左右の余白よりも大きなmarginが指定された要素が、 .containerの子孫要素に存在している場合です。デベロッパーツールを使用せず、画面幅を少しずつ小さくしていったとき、どこかのタイミングで横スクロールが出ていませんか? 気づいていないだけかもしれませんが、実は画面幅が746px〜768pxなどの間、横スクロールが表示される、という事象があるかもしれません。問題を消すためには、大きすぎる左右の余白をもった要素がないかを探してみるのもいいのでは、と思います。

NAKAZAKI

2020/04/04 10:46

ご教授ありがとうございます。確かにデベロッパーツールを使用せずとも、いつもほんの少し小さな横スクロールが出ています。子孫要素などない、ほぼプレーンなフッターだけのHTMLでもそういう事象が発生しているので、問題は根深いというか… こういった事象は報告されていないようなので、私の環境のGoogleクロームやデベロッパーツールがおかしいのかな？とさえ思います。何せ時々はまともな表示になるので… （なお、CSSのHTMLとbodyにはmarginやpadding、box-sizingは設定していますがやはり状況はかわりません。）

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