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 編集

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