遅い答え以上にそれが誰かを助けることを願っています
CSSメディアでは、幅とデバイス幅の違いが少し混乱する可能性があるので、それについて少し説明しましょう。 device-widthは、デバイス自体の幅を指します。言葉、デバイスの画面解像度。画面の解像度が1440x 900であるとします。これは、画面の幅が1440ピクセルであるため、デバイス幅が1440pxであることを意味します。技術的には640x 960の解像度であるにもかかわらず、人気のあるiPhone 4（デバイス幅：320px）を含め、ほとんどの携帯電話のデバイス幅は480px以下です。これは、iPhone4の網膜ディスプレイが画面上の各CSSピクセルに2つのデバイスピクセルを詰め込んでいるためです。これはIpad3にも当てはまります。報告されたデバイス幅は、実際の画面解像度が1536px x 2048pxであるにもかかわらず、以前のデバイスと同じように768pxです。一般に、レスポンシブWebページの作成に関しては、幅の方が用途が広いですが、デバイス幅は、モバイルデバイスを特にターゲットにする場合に役立ちます（たとえば、ブラウザウィンドウが小さいデスクトップではありません）。
as fromdeveloper.mozilla.org、
幅：
値：メディア：視覚的、触覚的
最小/最大プレフィックスを受け入れます：はい幅メディア機能は、出力デバイスのレンダリング面の幅（ドキュメントウィンドウの幅、プリンタのページボックスの幅など）を表します。
注：ユーザーがウィンドウのサイズを変更すると、ブラウザは幅と高さのメディア機能を使用したメディアクエリに基づいてスタイルシートを適切に切り替えます。 !!!
この記事はjavascriptkitから非常に興味深いものでした： http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
device-widthを定義すると、iphone、ipad、iPod、およびモバイルデバイスでページを開いたときに特定のcssが呼び出されることを意味します。例えば ：
@media only screen and (max-device-width:480px){
body{
color:red;
}
}
または、ウィンドウのサイズが変更されたときに特定のcssが呼び出されることを意味する幅を定義する場合。例えば ：
@media only screen and (min-width: 481px) and (max-width: 1024px) {
body{
color:yellow;
}
}
詳細については、チェックしてください http://webdesignerwall.com/tutorials/css3-media-queries 、 http://x7.fi/2010/02/12/how-to- fit-your-website-for-the-Apple-ipad /
クロスプラットフォームアプリを作成している場合（たとえば、phonegap/cordovaを使用している場合）、
Device-widthまたはdevice-heightは使用しないでください。 Androidデバイスはデバイスの幅またはデバイスの高さに問題が発生するため、CSSメディアクエリでは幅または高さを使用してください。iOSの場合は正常に機能します。Androidデバイスはdevice-width/device-heightをサポートしていません。