Chromeの検証画面でタブレット用の表示をしたい

Question

前提・実現したいこと

Choromeの検証機能を使ってレスポンシブデザインを作っていましたが、検証画面の右上にある、マウスを乗せると「Toggle device toolbar」と表示されるボタン？を押すとタブレット表示(幅700px)との切り替えができると思います。しかしながら、ボタンを押してもPC用表示が縮小されるだけで、この区域(下のソースコードの481~768px）のcssが適用されず、下のソースコードの769px以上のcssが適用されたままです。何をお聞きすれば良いのかよく分からないのですが、こうなってしまう原因としてあげられるものと解決法をご教示願いたいです。よろしくお願いします。

該当のソースコード

@media screen and (min-width:769px){
.
.
.
}

@media only screen and (min-width:481px) and (max-width:768px){
.
.
.
}

@media screen and (max-width: 480px){
.
.
.
}

補足

検証ではなく、単純にChoromeの画面幅を拡大縮小させると然るべきと思われるポイントで切り替わりが起きました。

Answer 1

<meta name="viewport">はきちんと書いていますか？

書いていない場合、タブレットやスマホの実機でも、パソコン版を縮小したような表示がなされてしまいます。

Comments

[lacco]

完全にご指摘の通りでした。ありがとうございました。