HTML,CSS 初心者　模写していますが、レスポンシブがデペロッパーツールで反映されません。

前提・実現したいこと

デイトラというサイトの模写をしていますが、レスポンシブがデペロッパーツールで反映されないので困っています。

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

スマートフォンサイズに画面はなっているのですが、パソコンのサイズの物が縮小されて反映されています。

該当のソースコード

HTMLに<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
cssに@media screen and (max-width: 480px)
を書いています。

試したこと

調べましたがどれも上記のコードを書くという事しか見つけられなかったです。

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

画像の上には
Responsive 480×400 60%(Auto adjust-zoomにチェック入っています) No throttling
またelementタグの１番左にあるボタンを押しカーソルを文字や画像に合わせると詳細が出てきますが、詳細がパソコンで設定したスタイルシートのサイズが表示されています。
よろしくお願い致します。

m.ts10806

2021/05/08 00:14

>HTML,CSS 初心者 HTML,CSSは質問タグでありますし「初心者アイコン」もありますので、タイトルや質問本文に含む必要はありません。質問は編集できます。

m.ts10806

2021/05/08 00:15

あと、他者がコピペで現象が再現できるコードを提示されないと何とも言えません。現在提示されている情報では何も表示されません。

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

回答2件

クォーテーションに全角を使ってはいけないです。
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
↓
<meta name="viewport" content="width=device-width,initial-scale=1.0">

投稿2021/05/08 01:47

Lhankor_Mhy

総合スコア36158

rarachoko

2021/05/08 20:10

全然気づかなかったです????ありがとうございます！無事、反映されました★

Lhankor_Mhy

2021/05/09 11:37

ご解決されて何よりです。お手数ですが、BAを選出して質問を解決済みにしてください。

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

メディアクエリが分からないのだと解釈しました。
下記コードはメディアクエリを使いレスポンシブ対応させているサンプルです。
参考までにどうぞ。

html + css

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    body {
        width:100vw;
        height:100vh;
        margin:0;
    }

    @media screen and (min-width: 320px) {
        body {
            background-color: black;
        }
    }

    @media screen and (min-width: 768px) {
        body {
            background-color: yellow;
        }
    }

    @media screen and (min-width: 1024px) {
        body {
            background-color: blue;
        }
    }

    @media screen and (min-width: 1366px) {
        body {
            background-color: greenyellow;
        }
    }

    </style>
</head>

<body>

</body>

</html>

投稿2021/05/07 22:15