Reputation: 1
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:
Motorola Droid 3/4/Razr/Atrix (540x960px; pixel-ratio:1; resolution 96dpi)
Motorola Droid Razr HD (720x1280px; pixel-ratio:1; resolution 96dpi)
Sony Xperia Sola (480x854px; pixel-ratio:1; resolution 96dpi)
Thank you.
Upvotes: 0
Views: 130