[解決済み】モバイルウェブの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 を自然発生させます。