web-dev-qa-db-ja.com

すべてのモバイルデバイスとタブレットを対象とするCSSメディアクエリのコーディング方法

@media only screen and (max-device-width : 640px) {
/* Styles */
}

@media only screen and (max-device-width: 768px) {
/* Styles */
}

これは私がこれまで持っているものです。私が取り組んでいるモバイルサイトのPSDモックアップの幅は640ピクセルです。もう1つは、タブレットバージョンのサイトで、768pxです。 max-widthを使用するだけでWebブラウザーでサイトをテストできましたが、今はこのサイトをデバイスで動作させる時間であり、通常のフルサイズのWebページをレンダリングしています。上記の2つのクエリは、私の最良の推測です。どこがおかしいの？

css3responsive-designmedia-queries
28
user1666487

これは、レベル4のメディアクエリを使用して実行できます：（ ブラウザサポートは非​​常に優れています-CaniUse ）

インタラクションメディア機能

ここでの考え方は、機能に基づいてデバイスをターゲットにすることです。 （言うまでもなく、ターゲットを移動する傾向があるデバイスのsizeまたはresolutionをチェックします）

pointer media featureは、デバイスで使用されるポインターメカニズムの品質を照会します。

hover media featureは、ユーザーが特定のデバイスでページ上の要素にカーソルを合わせる機能を照会します。

質問に答えるために...

モバイルデバイス/テーブルは次の点で類似しています：

1）デバイスの主要な入力メカニズムの精度は制限されています。

これは、次のメディアクエリを使用できることを意味します。

@media (pointer:coarse) {
    /* custom css for "touch targets" */
}

div {
  width: 400px;
  height: 200px;
  color: white;
  padding: 15px;
  font-size: 20px;
  font-family: Verdana;
  line-height: 1.3;
  background: green;
}
@media (pointer:coarse) { 
  div {
    background: red;
  }
}
<h2>The <a href="https://www.w3.org/TR/mediaqueries-4/#pointer">pointer media feature</a> queries the quality of the pointer mechanism used by the device.</h2>
<div>The background here will be green on 'desktop' (devices with an accurate pointing mechanism such as a mouse) and red on 'mobile' (devices with limited accuracy of primary input mechanism) </div>

Codepenデモ

2）プライマリポインティングシステムがホバーできない

したがって、メディアクエリは次のようになります。

@media (hover: none) { 
   /* custom css for devices where the primary input mechanism cannot hover 
   at all or cannot conveniently hover
}

NB：バージョン59より前のChrome/Androidではon-demand hover/any-hoverメディアクエリの値。この値は後で仕様から削除され、 Chromeでは不要になりました バージョン59から。したがって、Android

@media (hover:none), (hover:on-demand) { 
  /* custom css for "touch targets" */
}

div {
  width: 400px;
  height: 150px;
  color: white;
  padding: 15px;
  font-size: 20px;
  font-family: Verdana;
  line-height: 1.3;
  background: green;
}
@media (hover:none), (hover:on-demand){ 
  div {
    background: red;
  }
}
<h2>The <a href="https://www.w3.org/TR/mediaqueries-4/#hover">hover media feature</a> queries the user’s ability to hover over elements on the page</h2>
<div>The background here will be green on 'desktop' (devices which support hover) and red on 'mobile' (devices which don't [easily] support hover ) </div>

Codepenデモ

NB：

マウスをモバイル/タブレットに接続する場合でも、primary対話モードはホバーをサポートしないため、ホバーメディア機能はnoneと一致します。

secondaryデバイスを考慮したい場合は、 any-pointerおよびany-hover機能 を使用できます。

したがって、ポインティングデバイスに接続されたモバイルデバイスを「デスクトップ」のように扱いたい場合は、次を使用できます。

@media (any-hover: hover) { ... }

余分な読書

27
Danield

最初に特定の幅を使用したり、向きや他のナンセンスをいじったりする代わりに、次のメディアタグを使用することをお勧めします...

@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
  /* Your touch-specific css goes here */
}
@media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
  /* Your click-specific css goes here */
}

そして、これらのタグは何のために使用しますか？ホバー＆クリック対タッチイベント用に設定します。

上記の灰色の領域にあるいくつかのデバイス以外のタッチデバイスの解像度は、デスクトップデバイスとは大きく異なります。デザイン要素を設定するのではなく、ナビゲーション要素を設定します。一部の学生は、max-widthの狂気の方が良いかもしれないと泣くかもしれませんが、非常に多くのHD電話があるため、device-max-widthがすぐに役に立たなくなるのはばかげています。

ただし、should widthメディア幅クエリを使用します。ただし、max-device-widthではなく、max-widthとmin-widthだけを気にします。上記のタグは、タッチユーザーではなくタッチアドレスに対応し、ウィンドウサイズに基づいて最小幅アドレスと最大幅アドレスに対応し、サイトを調整しますvisuals。

さらに、モニターをさまざまな方向に配置できるため、方向を使用してモバイルかどうかを判断するのはばかげています（3モニターで見た一般的なセットアップは、ポートレートセンターモニターとランドスケープサイドモニターです）。

幅表示の場合は、さまざまな幅でサイトをきれいにし、実際にアクセスしているデバイスの種類を無視して、画面がさまざまなサイズできれいに表示されるようにします。これは、デスクトップとモバイルの両方に適用される優れた設計です。画面の左上隅にある小さなウィンドウにあなたのサイトを参照（または気を散らす）して、他の場所の画面の大部分を使用している場合は、モバイルユーザーだけでなく、より小さな幅が構築されます。他のことを試してみると、すぐにWeb開発の非常に苦痛で自滅的な道をたどります。そのため、これらの幅が狭い場合は、幅を自由に設定できますが、個人的に好きなものをいくつか含めます。

だから、あなたはこのようなものを持っているはずです...

@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
    #touch_logo {
       display: inherit;
    }
    #mouse_logo {
       display: none;
    }
  /* Your touch-specific css goes here */
}
@media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
    #touch_logo {
       display: none;
    }
    #mouse_logo {
       display: inherit;
    }
  /* Your click-specific css goes here */
}
@media (min-width: 541px){
  /* Big view stuff goes here. */
}
@media (max-width: 540px) and (min-width: 400px){
  /* Smaller view stuff goes here. */
}
@media (max-width: 399px){
  /* Stuff for really small views goes here. */
}

ただし、ページの頭に以下を含めることを忘れないでください：

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

場合によってはまだ壊れる可能性がありますが、これは他の多くのソリューションよりも簡潔で完全でなければなりません。

6
liljoshu

CSSファイルの本体（1024px以上）にメインのデスクトップスタイルがあり、特定の画面サイズの場合：

@media all and (min-width:960px) and (max-width: 1024px) {
  /* put your css styles in here */
}

@media all and (min-width:801px) and (max-width: 959px) {
  /* put your css styles in here */
}

@media all and (min-width:769px) and (max-width: 800px) {
  /* put your css styles in here */
}

@media all and (min-width:569px) and (max-width: 768px) {
  /* put your css styles in here */
}

@media all and (min-width:481px) and (max-width: 568px) {
  /* put your css styles in here */
}

@media all and (min-width:321px) and (max-width: 480px) {
  /* put your css styles in here */
}

@media all and (min-width:0px) and (max-width: 320px) {
  /* put your css styles in here */
}

これは、使用されているほとんどすべてのデバイスをカバーします-範囲の最後のサイズ（つまり、320、480、568、768、800、1024）のスタイリングを正しくすることに集中します。利用可能なサイズに応じて。

また、どこでもpxを使用しないでください-emまたは％を使用してください

1
Rahi.Shah