CODEWITHSUNDEEP
cssmedia-queries
Christopher Craven
Christopher Craven

Reputation: 41

Media query for differentiating between phones & Desktop

I have seen many different media queries for detecting if the user is using a phone or a desktop. However for many devices now the gap between resolution, ratios and many other things overlaps between high end devices (such as the S8), laptops and low end phones.

My question is, if I want a style sheet for phones, which include all phones and one for desktops, is there a media query to use that is best or should I take a different approach maybe with JavaScript

The landscape and portrait approach works until the soft key board is used and the phone re-considers it as landscape

Examples below no longer work on all devices as they have become out dated.

@media only screen and (orientation : portrait)
@media only screen and (max-device-width: 480px)
@media only screen and (min-aspect-ratio: 13/9)

Upvotes: 0

Views: 345

Answers (1)

Chris
Chris

Reputation: 458

Not sure if this helps but I usually stick to the breakpoints defined by Bootstrap V4 even if it's not a Bootstrap project. I find that it's a nice range to develop in and more times than not I only have specific styles in the larger breakpoints (as I'm developing for mobile first).

If you only want to use two breakpoints I'd probably suggest < 768px and > 768px but you might have people with varying opinions on that. You'll definitely have edge cases with certain devices.

Upvotes: 1

Related Questions