デベロッパーツールでスマホ画面の表示を確認したい

表題の通り、コーディング後、スマホの表示をデベロッパーツールで確認したいのですが、反映されません。
cssに
@media only screen and (max-width:500px) {}
と記載しています。
デベロッパーツールのデバイスをどのスマホを選択しても、cssに記載されたように表示されませんが、pc画面の幅を調整して狭くすると、cssの指示が効いています。
どうしてデベロッパーツールでは表示されないのでしょうか？

発生している問題・エラーメッセージ

エラーメッセージは特にありません。

該当のソースコード

@media only screen and (max-width:500px) {
  .top h4{
    font-size: 16px;
  }
  .top p{
    font-size: 12px;
  }
  .reservation p{
    font-size: 12px;
    margin-top: 20px;
    border: solid 1px #ffffff;
    padding: 10px;
  }
  nav ul {
    display: block;
  }
  .wrap {
    display: block;
  }
  .service {
    margin-bottom: 20px;
  }
  .wrap2 {
    display: block;
  }
}

試したこと

pc画面の幅を調整して狭くすると、cssの指示が効いていて、上記のソースコード通りの表示になります。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

HTMLがわからなかったので以下のコード（body{background-color:#000;}を追記したもの）で試してみました。

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width">
7<style>
8@media only screen and (max-width:500px) {
9  body{background-color:#000;}
10  .top h4{
11    font-size: 16px;
12  }
13  .top p{
14    font-size: 12px;
15  }
16  .reservation p{
17    font-size: 12px;
18    margin-top: 20px;
19    border: solid 1px #ffffff;
20    padding: 10px;
21  }
22  nav ul {
23    display: block;
24  }
25  .wrap {
26    display: block;
27  }
28  .service {
29    margin-bottom: 20px;
30  }
31  .wrap2 {
32    display: block;
33  }
34}
35</style>
36</head>
37
38<body>
39test
40</body>
41
42</html>

ウィンドウ幅を狭めても、デベロッパーツールのデバイスを切り替えても幅500pxを境に背景が黒になりました。（外部CSSとして読み込ませても同じでした）
「pc画面の幅を調整して狭くすると、cssの指示が効いています」とあることからあまり関係ないかもしれませんが、キャッシュの削除・スーパーリロード・シークレットモードへの切り替え・他ブラウザでの確認等もお試しください。「デバイスの向き」が横になっていないかどうかも。
また、デベロッパーツールで希望のCSSが読み込まれているか、別のスタイルに上書きされていないかなどもご確認ください。

投稿2020/09/10 00:31