質問: ### 前提・実現したいこと Airbnbの公式サイトのコーディングをしており、レスポンシブデザインの練習をしています。 ### 発生している問題・エラーメッセージ ``` HTMLにメディアクエリとして、以下のように記載しました。 そして、コードを書いていき、ブラウザで確認しました。 ブラウザの横幅を動かし,メディアクエリが正常に作動しているか確認すると, 767px以下ではsmall.cssが、768px以上991px以下ではsmall.css+medium.cssが、992px以上ではsmall.css+medium.css+large.cssが反映されており、正常に作動していました。 しかし、Chromeのディベロッパーツールでサイズをモバイル端末(widthが320pxや425px)にして確認すると、medium.css(widthが768px以上991px以下)のものが反映されてしまいます。 ディベロッパーツールでモバイル端末にして確認した時にsmall.cssだけを適用させたいのですが、どのようにすればいいでしょうか? ``` ### 該当のソースコード ``` ``` ### 試したこと ここに問題に対して試したことを記載してください。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
回答: ビューポート設定がない、または有効ではない、という原因が考えられると思います。 > > > > | | モバイル | デスクトップ | > | --- | --- | --- | > | viewport のデフォルトの横幅 | 980 px | ブラウザの論理ピクセルの横幅 | > > > Viewportまとめ - Qiita > > >