0

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.

Enzo I.
  • 1
  • 3
  • If I understood well, what you want is: Have the two main elements of the website visible as long as it is Normal Monitor, Landscape orientation and / or Above 800px wide. Is that correct? – JuanBonnett Feb 17 '15 at 18:47
  • I want to hide one element only for mobile smartphones (screen 4-5 inches) with landscape mode, screewidth up to 800px and pixel-ratio 1 and resolution 96dpi. If I write such a media query it would affect also desktop monitors. So I need another discriminating factor (which one?) to add to the media query. – Enzo I. Feb 17 '15 at 20:53

0 Answers0