css - モバイルのメディアクエリが機能しない

Question

初めて CSS でメディアクエリを使用しようとしていますが、うまく機能していないようです。

テストするために、iPhone などでページを見ているときに #page-wrap のサイズを 440px に変更したかったのですが、何も変わりませんでした。これは私が使用したものです。

@media only screen and (max-device-width: 480px) { #page-wrap {width:440px;} }

これもヘッダーに入れました。

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

これは正しいです？

score 2 · Accepted Answer

を使用している特定の理由はありますmax-device-widthか? とは異なりmax-width、ユーザーがデバイスを回転させたり、その他の種類の調整を行ったりするのには役立ちません。

代わりにmax-width、次のようにを使用してください。

@media only screen and (max-width: 300px) { 
    #page-wrap {
        width:100px;
    } 
}

それを説明するこのjsFiddleをチェックしてください。

score 1 · Accepted Answer

メディアクエリでこれを試してください：

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

2 に答える 2