web-dev-qa-db-ja.com

IPad Proの正しいメディアクエリ

これら2つはありますが、機能していません。 Chromeでシミュレートしています

/* Landscape*/

    @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape)  {}

    /* Portrait*/
    @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)  {}

「and（orientation：landscape）」を削除すると、最初のメディアクエリでそこのCSSが機能します。横向きと縦向きの正しい向きは何ですか？

HTMLメタは次のように設定されます

  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
cssipad
23
Rory
/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Portrait */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

私はiPad Proを持っていませんが、これはChromeシミュレーターで動作します。

39
nykon333
/* Landscape*/

@media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape)  {}

/* Portrait*/
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)  {}

IPad ProのPortrait Mediasクエリはそのままで問題ありません。

IPad Proのランドスケープメディアクエリ（min-device-width）は1366pxで、（max device-height）は1024pxでなければなりません。

お役に立てれば。

14
Daniel T.

これは私のために働いた

/* Portrait */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-width: 1112px) 
  and (max-width: 1112px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2)
 {

}
4
STrunkett

それぞれが異なるビューポートを持つ複数のiPad Proがあることに注意してください。Chrome開発者ツールを介してiPad Proをエミュレートする場合、iPad Pro（12.9 "）がデフォルトのオプションです。別のビューポートを備えた他のiPad Pro（10.5 "または9.7"）では、正しい仕様のカスタムエミュレートデバイスを追加する必要があります。

デバイス、ビューポート、およびそれぞれのCSSメディアクエリは、 http://vizdevices.yesviz.com/devices.php で検索できます。

たとえば、iPad Pro（12.9 "）には次のメディアクエリがあります。

/* Landscape */ 
@media only screen and (min-width: 1366px) and (orientation: landscape) { /* Your Styles... */ }

/*Portrait*/ 
@media only screen and (min-width: 1024px) and (orientation: portrait) { /* Your Styles... */ }

一方、iPad Pro（10.5 "）には次のものがあります。

/* Landscape */ 
@media only screen and (min-device-width: 1112px) and (orientation: landscape) { /* Your Styles... */ }

/*Portrait*/ 
@media only screen and (min-device-width: 834px) and (orientation: portrait) { /* Your Styles... */ }
2
Jubal Lindsey

遅すぎますが、これで頭痛から救われるかもしれません！これらはすべて、ターゲットブラウザがモバイルであることを検出する必要があるためです！

これはモバイルですか？最小/最大 幅/高さ）の

だから、これはうまくいくようです：

@media (hover: none) {
    /* ... */
}

デバイスのプライマリ入力メカニズムシステムが要素に簡単にホバーできない場合、または簡単にできない場合（ホバーをエミュレートするためにロングタッチが実行されるなど）、またはプライマリ入力メカニズムがまったくない場合は、何も使用しません！以下のリンクから読むことができる多くのケースがあります。

---（同様に説明されます ブラウザのサポート用 MDNからこれを参照

1
ϻαϻɾΣɀО-MaMrEzO

提案された答えをいくつか試しましたが、問題はメディアクエリが他のクエリと競合し、iPad ProでモバイルCSSを表示する代わりに、デスクトップCSSを表示していたことです。したがって、寸法に最大値と最小値を使用する代わりに、EXACT VALUESを使用しました。iPadProではブラウザーのサイズを変更できないため、これが機能します。

900ピクセル未満の幅のデバイスに使用するモバイルCSSのクエリを追加したことに注意してください。必要に応じて削除してください。

これはクエリであり、ランドスケープとポートレートの両方を組み合わせて、12.9インチで機能します。10.5インチをターゲットにする必要がある場合は、これらのディメンションのクエリを追加するだけです。

@media only screen and (max-width: 900px), 
(height: 1024px) and (width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape), 
(width: 1024px) and (height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait)  {

     // insert mobile and iPad Pro 12.9" CSS here    
}
0
frenchie

IPad Pro 11 "をターゲットにする場合、device-widthは834px、device-heightは1194px、device-pixel-ratioは2です。ソース：screen.width、screen.heightおよびiOSシミュレータ上のSafariによって報告されるdevicePixelRatio。

ポートレートの正確なメディアクエリ：(device-height: 1194px) and (device-width: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)

0
salomvary