モバイルでCSSメディアクエリが表示されない

Question

私はこれを初めて知ったので、私は見落としたことがあると思っています。

ブラウザでウィンドウのサイズを直接変更すると、私が作成したサイトがメディアクエリに応答します。私のiPadを見ると、サイトはメディアの質問に反応します。しかし、私の携帯電話を見ると、モバイルではなくタブレットのバージョンが表示されます。

@media screen and (max-width: 767px) { 
.container { 
    width: 100%; 
} 
.logo { 
    background-position: 50% 30px; 
} 
.banner { 
    height: 500px; 
} 
.banner h1 { 
    margin-top: 0px;  
} 
.title { 
    background-color: #d44137; 
    width: 100%; 
    margin: 0; 
} 
.pricing h2 { 
    display: none; 
} 
.pricing { 
    width: 100%; 
} 
.pricing p { 
    width: 95%; 
} 
.pricing-1 { 
    margin-left: 0; 
} 
.pricing-1 p { 
    margin-left: 0; 
} 
.content { 
    width: 100%; 
} 
.sidebar { 
    width: 100%; 
} 
.testimonials { 
    width: 90%; 
    float: left; 
    margin: 0; 
    padding: 10px 5% 10px 5%; 
} 
.records { 
    width: 90%; 
    float: left; 
    padding: 10px 0 10px 5%; 
} 
.info { 
    width: 90%; 
    float: left; 
    text-align: justify; 
    padding: 10px 0 10px 5%; 
} 
.info img { 
    display: none; 
} 
.company { 
    width: 90%; 
    float: left; 
    padding: 10px 5% 20px 5%; 
} 
.video { 
    width: 90%; 
    float: left; 
    margin-left: 5%; 
    padding-bottom: 20px; 
} 
form { 
    width: 90%; 
    margin: 0 5% 30px 5%; 
} 
.map { 
    width: 90%; 
    margin: 0 5% 30px 5%; 
} 
.contact h1 { 
    margin-left: 5%; 
} 
.footer { 
    height: 70px; 
} 
.copyright { 
    font-size: 9pt; 
    text-align: center; 
} 
.social { 
    display: none; 
} 
} 

私は気づいた何かが、私はメディアクエリではなく、最大幅で最大-デバイス幅を置けば、それはモバイルのために働くということですが、私は私のブラウザ画面のサイズを変更すると、それは動作しません。私はまた、device-widthが廃止予定であることを知ったので、実際には使用したくありません。

アイデア？

本当に助けていただきありがとうございます。 :)

編集：私は最後の閉じ括弧が欠けていましたが、これはモバイルでどのように見えるかには影響しません。それを選んでいただきありがとうございます！

Answer 1

あなたは、中括弧に// @media画面と閉じることを忘れて（最大幅を：767px）{

Answer 2

はちょうどあなたの@media画面とのために閉じる中括弧を追加します（最大幅：767px）。

Answer 3

携帯端末でウィンドウのサイズを変更できないため、問題はあまりありません。物理的なデバイスでさらにテストしてください。それは問題ではないかもしれません。

また、device-withプロパティの非推奨は、今後のメジャーリリースで削除されるということを意味します。したがって、より良い方法が生まれるまで使用し続けるのはおそらく安全です。

Answer 4

これをあなたのhtmlに追加したことを確認してください。

<meta name="viewport" content="width=device-width, initial-scale=1">