0

This works to detect landscape on a mobile phone on Android:

@media (first_media_query) or ((orientation: landscape) and (pointer: coarse))

first_media_query = any media query

However, it doesn't work for ios (tested on iPhone and iPad).

How do I fix the code above? (it must work on both android and iOS)

If possible, I prefer to avoid min/max- device-width and use device features detection instead.

(orientation: landscape) combined with aspect-ratio or -wekbit-pixel-ratio seems a good candidate, however I am looking for a solution that relies on device features

dragonmnl
  • 14,578
  • 33
  • 84
  • 129
  • hmm. maybe [this](https://stackoverflow.com/a/50302305/4935162)? nest the landscape media query inside – Yarin_007 Mar 15 '23 at 21:05
  • We cannot detect the device type on the CSS side in a healthy way. The healthiest method would be to detect it with javascript and define a class or attribute to the body. – sawacrow Mar 15 '23 at 21:47
  • @Yarin_007 referenced answer seems to work in fact. It was the way I used it that it was wrong (I posted an answer, and will update the question to reflect the issue better, as it was a different issue than iOS). – dragonmnl Mar 15 '23 at 21:56

1 Answers1

0

I found the issue:

Original code (works on android but not ios):

 @media (first_media_query) or (second_media_query)

second_media_query = (orientation: landscape) and (pointer: coarse)

Cross-platform code (works on both ios and android - without or):

 @media (first_media_query), (second_media_query)
dragonmnl
  • 14,578
  • 33
  • 84
  • 129