web-dev-qa-db-ja.com

モバイルWebの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)

違いは何ですか？

csscss3mobile-websitemedia-queries
236
virsir

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

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

max-heightとmax-device-heightについても同様です。

243
Ian Devlin

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

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

81
voncox

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

ほとんどが「モバイルデバイス」用のすべてのブレークポイントには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 */
}
15
1ubos

max-device-widthには定数値（おそらく2）があります

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

6
Sarath

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

5
Danny

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

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

3
Himanshu Garg

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

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

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

2
SammieFox

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

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

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

2
Lucky Chaturvedi