Enzo I.
Enzo I.

Reputation: 1

Media Queries for low resolution small screens (phones)

I am working on a responsive layout for a page with two main elements, and I need to hide one of them on standard phone screens (let's say up to about 5 inches). Subconditions are landscape mode and screen width up to 800px. Usually smartphones cab be easily distinguished from common monitors because of their higher pixel ratio (> 1) and/or resolution (>130dpi). Even so, testing through Chrome Dev Tools, I came across some mobiles with pixel-ratio=1 and resolution=96dpi, specs that make them indistinguishable from a common monitor to my Media Query:

@media only screen and (orientation:landscape) and (max-width:800px) and (min-resolution: 1dppx);

As stated, this Media Query affects also common monitors. Is there any other specification I can use to separate the cases?

To throw in some devices about the matter:

Thank you.

Upvotes: 0

Views: 130

Answers (0)

Related Questions