web-dev-qa-db-ja.com

iPadおよびデスクトップ用のメディアクエリ（最大幅）

iPadとデスクトップの両方を最大幅：768でターゲットにするCSSコードが必要です。

これ（理由はわかりませんが、喜んで知っています）はiPad（デスクトップのみ）では機能しません：

@media only screen and (max-width: 768px)

だから私はiPadのためにこれをしなければなりませんでした：

@media only screen and (device-width: 768px)

ただし、両方のメディアクエリ内にまったく同じコードがあり、受け入れることができません。

私もこれを試しました：

@media only screen and (max-width: 767px) or (device-width: 768px)

上記のこれも機能しません-実際には、iPadではなく、幅に関係なくデスクトップで機能します。本当に奇妙です。

同じメディアクエリでiPadとデスクトップの両方をターゲットにする方法は？

cssipadmedia
9
zok

カンマを使用して、@ mediaクエリ内に2つの異なるルールを含めることができます。これにより、ルールが同じ場合に両方のデバイスの冗長なCSSを回避できます。

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

次のコードは、iPad（ポートレートとランドスケープ）専用です。

/* iPad Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* CSS */
}

/* iPad Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
/* CSS */
}

これがお役に立てば幸いです。ご不明な点がある場合や、説明が必要な場合はお知らせください。

20
Parker Young

私はこれを使用しました。すべてのデバイスで私のために働きます。

@media only screen and (min-width: 1024px) and (max-width: 1199px){

}

@media only screen and (min-width: 768px) and (max-width: 1023px){

}

@media only screen and (min-width: 480px) and (max-width: 767px){

}

@media only screen and (min-width: 0px) and (max-width: 479px){

}
6
Amit

HTMLでこれが必要な場合は、メディアクエリが両方で機能します。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
1
user2760338