248

max-device-widthiPhone/Android 携帯用の HTML ページをいくつか開発する必要がありますが、との違いは何max-widthですか? 画面サイズごとに異なるcssを使用する必要があります。

@media all and (max-device-width: 400px)

@media all and (max-width: 400px)

違いは何ですか？

4

8 に答える 8

264

max-widthブラウザなどのターゲット表示領域の幅です

max-device-widthデバイスのレンダリング領域全体、つまり実際のデバイス画面の幅です。

当然max-heightのことながら同じことが言えます。max-device-height

于 2011-07-19T12:54:14.860 に答える
87

max-widthビューポートの幅を指し、。と組み合わせて特定のサイズまたは方向をターゲットにするために使用できますmax-height。複数のmax-width（またはmin-width）条件を使用すると、ブラウザのサイズが変更されたり、iPhoneなどのデバイスで向きが変わったりすると、ページのスタイルを変更できます。

max-device-width向き、現在のスケール、またはサイズ変更に関係なく、デバイスのビューポートサイズを指します。これはデバイスでは変更されないため、画面の回転またはサイズ変更時にスタイルシートまたはCSSディレクティブを切り替えるために使用することはできません。

于 2011-08-09T13:00:07.037 に答える
11

max-device-widthは、デバイスのレンダリング幅です

@media all and (max-device-width: 400px) {
    /* styles for devices with a maximum width of 400px and less
       Changes only on device orientation */
}

@media all and (max-width: 400px) {
    /* styles for target area with a maximum width of 400px and less
       Changes on device orientation , browser resize */
}

max-widthは、ターゲット表示領域の幅であり、ブラウザの現在のサイズを意味します。

于 2011-07-19T12:49:18.477 に答える
6

違いは、max-device-widthはすべての画面の幅であり、max-widthはブラウザがページを表示するために使用するスペースを意味することです。しかし、もう1つの重要な違いは、Androidブラウザーのサポートです。実際、max-device-widthを使用する場合、これはOperaでのみ機能します。代わりに、max-widthはあらゆる種類のモバイルブラウザーで機能すると確信しています（ Chrome、Firefox、OperaでANDROIDをテストしました）。

于 2012-10-10T10:27:29.497 に答える