I want media queries for iPad landscape real device only?

Question

-> Hello i want media queries for iPad landscape real device only. i wast try to following media query but working fine both view portrait and landscape but want only landscape with only rel device not showing in any browser any idea please help me. Thanks in adavance.

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {}

i was use above media queries but showing also in portrait but i want only landscape

Answer 1

You can target orientation in media queries:

@media (orientation: landscape) {
  // your css
}

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation

A note from above source:

Note: This feature does not correspond to device orientation. Opening the soft keyboard on many devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.