With the increasing variety of devices available, identifying whether a user is using a phone or a desktop based on media queries has become more challenging. The differences in resolution, aspect ratios, and other factors between high-end phones, laptops, and low-end phones can often overlap.
If I want to create separate style sheets for phones and desktops, is there a specific media query that would work best, or should I consider a different approach like using JavaScript?
The landscape and portrait orientation method may not be effective when the soft keyboard is activated and the phone switches to landscape view.
The examples provided below are no longer reliable on all devices as they have become outdated:
@media only screen and (orientation : portrait)
@media only screen and (max-device-width: 480px)
@media only screen and (min-aspect-ratio: 13/9)