max-device-widthまたはmax-widthを使用する必要がありますか？

Question 1

CSSメディアクエリを使用max-device-widthすると、デバイス幅（iPhoneやAndroidデバイスなど）やmax-widthページ幅をターゲットにするために使用できます。

を使用する場合max-device-width、デスクトップのブラウザウィンドウのサイズを変更しても、デスクトップのサイズは変更されないため、CSSは変更されません。

を使用する場合max-width、デスクトップのブラウザウィンドウのサイズを変更すると、タッチ操作に適した要素やメニューなど、モバイル指向のスタイルが表示される場合があります。

特定のブラウザ（およびデバイス？）をターゲットにすることは非推奨になり、ターゲットするものにもう少し注意を払う必要があります。それはメディアクエリにも当てはまりますか？

なぜあなたはお互いをターゲットにするのですか？どれがお勧めですか？

これは、本番Webサイトで使用するメディアクエリの例です。

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {  
    /* Change a menu to fit the screen better, etc... */
}

私はとの両方を使用する傾向がmax-device-widthありmax-widthます。

Question 2

TL; DR

あなたが応答ウェブサイトを作っている場合は、使用min-width/max-widthあなたのメディアクエリではなく、中min-device-width/max-device-width順番に画面サイズの広い範囲を対象とします。

2018 Media Queries Level 4仕様ドラフトによると、device-widthメディア機能は非推奨です。下位互換性のために保持されますが、避ける必要があります。

8.付録A：廃止されたメディア機能

ビューポートのサイズ（またはページメディアのページボックス）、照会するwidth、heightおよびaspect-ratioメディア機能を使用しなければならない、というよりもdevice-width、device-heightとdevice-aspect-ratioに関わらず利用可能ですどのくらいのスペースのデバイスの物理的な大きさを指し、レイアウトされているドキュメント。device-*メディア機能も時々モバイルデバイスを検出するためのプロキシとして使用されています。代わりに、作成者は、スタイリングしようとしているデバイスの側面をより適切に表すメディア機能を使用する必要があります。

注意点として、指定することを忘れないでビューポートメタタグを中に<head>あなたの文書のセクション：

<meta name="viewport" content="width=device-width, initial-scale=1">

説明

特定のデバイスが持つ可能性のある画面解像度とピクセル密度はすべて異なるため、考慮すべき点がいくつかあるため、ピクセルはピクセルではありません（ズーム、ピクセル密度、画面解像度とサイズ、デバイスの向き、アスペクト比など）。 ..）。この場合、ピクセルは実際には物理ハードウェアピクセルではなく「光学参照ユニット」と呼ばれます。

幸い、ブラウザのビューポートの幅とスケーリングを制御するために、ドキュメントのセクションでビューポートメタタグを指定できます<head>。このタグのcontent値がwidth=device-width、の場合、画面の幅はデバイスに依存しないピクセルと一致し、すべての異なるデバイスがスケーリングされ、一貫して動作するようになります。

<meta name="viewport" content="width=device-width, initial-scale=1">

メディアクエリに関しては、ビューポート（現在のブラウザウィンドウ）をターゲットにし、デバイスの実際のフルスクリーンサイズ/解像度をターゲットにするため、max-widthではなくを使用することをお勧めします。max-device-widthmax-widthmax-device-width

つまり、を使用max-device-widthしている場合、デスクトップブラウザのサイズを変更するときに、異なるメディアクエリが適用されることはありません。これはmax-width、とは異なり、デバイスの実際のフルスクリーンサイズのみが考慮されるためです。ブラウザウィンドウの現在のサイズではありません。

ブラウザーのサイズを変更するとサイトが応答しないため、アダプティブレイアウトを作成しようとしている場合、これは大きな違いになります。さらに、max-device-width小さい画面のデバイスをターゲットにするために使用しているメディアクエリを使用している場合、ブラウザウィンドウのサイズを小さい画面サイズに合わせてサイズ変更しても、デスクトップには適用されません。

2018年の時点で、最新のメディアクエリ仕様ドラフトでは実際にdevice-widthメディア機能が廃止されているため、回避する必要があります。

さらに、Google Developersに関するこの記事では、次の使用を強くお勧めしますmax-device-width。

Google Developers-WebFundamentals-レスポンシブCSSメディアクエリ

に基づいてクエリを作成することもできます*-device-width。ただし、この方法は強くお勧めしません。

違いは微妙ですが、非常に重要です。min-widthブラウザウィンドウmin-device-widthのサイズに基づいているのに対し、画面のサイズに基づいています。残念ながら、従来のAndroidブラウザーを含む一部のブラウザーは、デバイスの幅を正しく報告せず、代わりに、予想されるビューポートの幅ではなく、デバイスのピクセルで画面サイズを報告する場合があります。

さらに、を使用*-device-widthすると、クエリがブラウザウィンドウのサイズではなく実際のデバイスサイズに基づいているため、ウィンドウのサイズを変更できるデスクトップやその他のデバイスにコンテンツが適応するのを防ぐことができます。

参考文献：

Question 3

デバイス幅は避けてください。その理由は、ユーザーのブラウザがそれにどのように反応するかを知ることができないからです。

IOSの場合、少なくともSafariでは簡単に思えます。これは、向きに関係なく、単一のデバイス幅の応答のようです。また、デバイス幅はデバイスの短辺についてのみ記載されています。私はこれをiPhone4SとiPadでテストしました。彼らは、どの方向に関係なく、それぞれ320と768に反応しました。

Androidの場合、それはより予測不可能です。Huawei Ascend Y330で6つのブラウザー（Androidのデフォルトブラウザー、Chrome、Opera、Firefox、Firefox Beta、Dolphin）をテストしました。応答は、ブラウザの種類と向きによって異なります。

クエリ（max-device-width：*** px）を使用してページでテストし、クエリを真の状態にするために入力する必要のあるpx値を見つけました。ブラウザの種類と向きに応じて、4つの異なる値（320、480、534、800）が必要でした。これにより、デバイス幅が使用できなくなります。

Question 4

max-widthを使用している場合、デスクトップのブラウザウィンドウのサイズを変更すると、タッチ操作に適した要素やメニューなど、モバイル指向のスタイルが表示される場合があります。

これが望ましいという世論のように思えるのは衝撃的です。モバイル以前の流体/液体の設計が間違った理由または正しい理由で悪いと見なされたかどうかはわかりません。これはリキッドレイアウトのより洗練されたバージョンであるように私には思えますが、デザイナーが何らかの理由で採用しているものです。

2000年代半ばに、デザインコミュニティ全体が液体よりも固定レイアウトを採用することを選択したとき、それはテキストのリフローが読みやすさを妨げ、未亡人やその他の典型的なアーティファクトをもたらすことが多かったためです。さらに、コードベースを維持することは、要素が衝突しないようにするために、設計から設計へとしばしば注意が必要でした。液体レイアウトとレスポンシブデザインの唯一の違いは、より優れたブラウザーと石積みのようなフレームワークの急増により、達成が容易になることです。

私は、数十年の優先順位を持つデスクトップドキュメントの規則に従うことを好むため、個人的にmin / max-device-widthを使用します。インターネットで開いたすべてのドキュメントがデスクトップでこのように動作するわけではありません。また、デスクトップにロードする他の種類のドキュメントやアプリケーションも同様です。MS WordやPhotoshopなどのように、モバイルが主流になる前に設計されたページは、スクロール位置を保持し、レイアウトを変更しないため、ユーザーはウィンドウ管理の無関係なタスクを実行するときにページフロー内のコンテンツを追跡できます。

私は通常、3つのブレークポイントを使用します。1つは電話用、1つはタブレット用、もう1つはデスクトップ用です。デスクトップと多くの場合、少なくとも横向きのポートレートは固定されており、タブレットのポートレート以下は液体です。アダプティブとレスポンシブのこの組み合わせにより、デスクトップをデスクトップサイトのように動作させると同時に、10個の奇数の個別の固定幅モバイルデバイスレイアウトをレイアウトする必要がなくなります。ビューポートのサイズを変更できないため、モバイルデバイスではテキストがリフローしません。