Chromeデベロッパーツールで画面幅ごとのレスポンシブ表示の切り替わりが、メディアクエリで記述したブレークポイントと異なるという事象が発生しており、困っています。現在行っているサイト模写課題にてこの事象が発生し、下記の確認用の簡単なコードにおいても同様の事象が再現できました。 - メディアクエリでのブレークポイントは670px デベロッパーツールでの切り替わりは503px ![イメージ説明](4237e58ce8bf387bf3487acbde2896a9.jpeg) ![イメージ説明](e9d78038dc8b5e87c5da3f7e4039b55f.jpeg) - メディアクエリでのブレークポイントは1000px デベロッパーツールでの切り替わりは750px ![イメージ説明](615d9d49f0db0affc5ade3ad1b2fa998.jpeg) ![イメージ説明](f19481e7628a4d6d62c39665f5932bb5.jpeg) ```ここに言語を入力 Document test hello world! ``` ```ここに言語を入力 /* タブレット向けレイアウト */ @media all and (max-width: 1000px) { h1{ color: red; } } /* スマホ向けレイアウト */ @media all and (max-width: 670px) { h1{ color: blue; } } ``` この事象の原因は一体何なのでしょうか。。。

Chromeデベロッパーツールで画面幅ごとのレスポンシブ表示の切り替わりが、メディアクエリでのブレークポイントと異なる

Chromeデベロッパーツールで画面幅ごとのレスポンシブ表示の切り替わりが、メディアクエリで記述したブレークポイントと異なるという事象が発生しており、困っています。

現在行っているサイト模写課題にてこの事象が発生し、下記の確認用の簡単なコードにおいても同様の事象が再現できました。

メディアクエリでのブレークポイントは670px
デベロッパーツールでの切り替わりは503px

メディアクエリでのブレークポイントは1000px
デベロッパーツールでの切り替わりは750px

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/test.css">
</head>

<body>
        <h1>test</h1>
        <p>hello world!</p>
</body>

</html>

/* タブレット向けレイアウト */
@media all and (max-width: 1000px) {
    h1{
        color: red;
    }
}
  
/* スマホ向けレイアウト */
@media all and (max-width: 670px) {
    h1{
        color: blue;
    }
}

この事象の原因は一体何なのでしょうか。。。

yoshinavi

2019/08/31 01:11

私の環境では提示のコードどおりの動作です。 OS：win10 ブラウザ：Chrome バージョン: 76.0.3809.132（Official Build）（64 ビット）

yoshinavi

2019/08/31 01:14

適用CSSの確認や、キャッシュクリアはお済ですか？

querykuma

2019/08/31 01:35

私の環境でも問題ありません。環境、OS、ツールのバージョンなどを書いておいてください。

Silky

2019/08/31 03:10

下記の状況ですが、いまだに問題は解決できておりません。。。 OS：win10 ブラウザ：Chrome バージョン: 76.0.3809.132（Official Build）（64 ビット）キャッシュクリア済み（その他のツール＞閲覧履歴を消去＞「キャッシュされた画像とファイル」を削除）

Silky

2019/08/31 03:27 編集

原因が判明しました！なんだか知らないうちにホイールでブラウザの表示を拡大していたようです。そのせいでブレークポイントが変わってしまっていたようです＾＾；ホイールをくるくる回して画面表示を拡大することがよくあるので、特にデベロッパーツールを使用するときには拡大、縮小されていないか今後は気を付けようと思います。お騒がせしましたｍ（＿＿）ｍありがとうございました！！