web-dev-qa-db-ja.com

RetinaiPad固有のCSS

モバイルデバイスでは見た目が異なるレスポンシブサイトを設計しています。 cssに3つの個別のメディアクエリとRetinaディスプレイのクエリがあります。

/** 768PX IPAD PORTRAIT **/
@media screen and (max-width: 768px) {}

/** 480PX IPHONE LANDSCAPE **/
@media screen and (max-width: 480px) {}

/** 320PX PORTRAIT **/
@media screen and (max-width: 320px) {}

/**  RETINA IMAGES **/
@media all and (-webkit-min-device-pixel-ratio: 2) {}

IPadがポートレートモードの場合はモバイルバージョンを取得しますが、ランドスケープモードの場合は通常バージョンのサイトを取得します。

私の問題はこれです。「新しいiPad」とRetinaディスプレイを使用すると、特定のRetina画像が横向きのRetinaiPadバージョンに対して適切に配置されません。グローバルな網膜のCSSは通常のCSSを覆しており、私が推測することになっています。

たとえば、モバイル版では、画面の中央に背景画像がありますが、通常のサイトでは、左揃えになっています。

CSSでのみiPadの網膜画像のみをターゲットにする方法を知っている人はいますか？

ありがとう

編集：これは私が遊んでいたものですが、うまくいかないようです：

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {}
ipadcssmedia-queriesretina-display
16
user127181

理解した。

IPad Retinaクエリを他のすべてのクエリの下に配置しましたが、最大から最小の順に他のクエリより上に配置する必要がありました。

13
user127181

試してください：

@media only screen 
  and (min-device-width: 1536px)
  and (max-device-width: 2048px)
  and (orientation : landscape)
  and (-webkit-min-device-pixel-ratio: 2) {
      // Retina iPad specific CSS
}
4
Connor

私は同じ問題を抱えていて、以下を使用して解決しました：

@media only screen and (max-width: 960px), only screen and (max-device-width: 960px) and (-webkit-device-pixel-ratio: 1.5)

私が使用するメタビューポートの場合：

content="width=device-width; initial-scale=1; maximum-scale=1"

これが完璧な解決策かどうかはわかりませんが、機能します。

3
Walli