css - iPad およびデスクトップ用の Media Query (最大幅)

Question

max-width: 768 で iPad とデスクトップの両方を対象とする 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 とデスクトップの両方をターゲットにする方法は?

Answer 1

コンマを使用して、@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 */
}

これがお役に立てば幸いです！これについて質問がある場合、または説明が必要な場合はお知らせください。

Answer 2

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

@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){

}