モバイルデバイスのmax-device-widthとmax-widthの違いは何ですか？

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

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

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

違いは何ですか？

max-width ターゲット表示領域の幅です（例：ブラウザ）

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

同じことがのために行くmax-heightとmax-device-height自然に。

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

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

このスタイルを使うことについてどう思いますか？

主に「モバイルデバイス」で使用するすべてのブレークmin(max)-device-widthポイントと、主に「デスクトップ」で使用するブレークポイントmin(max)-width。

幅を正しく計算しない「モバイルデバイス」はたくさんあります。

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtmlを見てください。

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}

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はターゲットの表示領域の幅であり、ブラウザの現在のサイズを意味します。

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

max-widthは、ターゲットの表示領域（ブラウザなど）の幅です。最大デバイス幅は、デバイスのレンダリング領域全体、つまり実際のデバイス画面の幅です。

• max-device-widthを使用している場合、デスクトップのブラウザーウィンドウのサイズを変更しても、CSSスタイルは別のメディアクエリ設定に変更されません。

• max-widthを使用している場合、デスクトップのブラウザーのサイズを変更すると、CSSは別のメディアクエリ設定に変更され、タッチフレンドリーメニューなどのモバイルのスタイルが表示される場合があります。

クロスプラットフォームアプリを作成している場合（たとえば、phonegap / cordovaを使用）、

device-widthまたはdevice-heightは使用しないでください。Androidデバイスはdevice-widthまたはdevice-heightで問題を起こすため、CSSメディアクエリでは幅または高さを使用してください。iOSの場合は問題なく動作します。Androidデバイスのみがdevice-width / device-heightをサポートしていません。

device-width / heightを使用しないでください。

device-width、device-height、およびdevice-aspect-ratioは、メディアクエリレベル4で非推奨になりました：https : //developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

特定のデバイスをターゲットにするには、幅と高さ（最小/最大なし）を向きと（最小/最大-）解像度と組み合わせて使用​​するだけです。モバイルの幅/高さは、デバイスの幅/高さと同じでなければなりません。