2

This is not a duplicate question, because I don't want to target the iPhone 6 specifically, I want to target ALL smart phones and mini tablets, icluding the iPhone 6, 7, 8, etc and Android, etc

I'm trying to find out a useful CSS media query to detect smart phones. So, I was thinking, the following would fit perfectly since the screen resolution in px on an iPhone 6 is almost the same as the one from a desktop screen with a pixel ratio of 1:

@media (max-device-width:16cm){ /* I need the PHYSICAL device width */
  ...
}

However, I'm not sure if this translates interally ALWAYS to 529.2px (1cm == 37.8px) or does it really respect the actual device width in cm of the hardware?

Because, in my opinion, what really matters is the physical space available, and I don't care at all how many pixels there are to represent this area in order to decide how much content I want to show.

Simon Ferndriger
  • 4,455
  • 6
  • 28
  • 53
  • 1
    Well you can't really use centimeters in css because on some devices the pixels are further apart from each other. – Trevi Awater Jan 30 '15 at 10:39
  • @Alagaros This is what I was afraid of. Logically, it makes sense to use centimeters, but it probably doesn't produce the expected outcome. So what would be a better media query to decet smart phones? – Simon Ferndriger Jan 30 '15 at 10:41
  • @DominicTobias Yes and no. I would like to detect ALL smart phones, including iPhone 6 - not just this one. – Simon Ferndriger Jan 30 '15 at 10:43
  • 1
    Well what you could do is create some algorithm using the DPI (density per pixel) more information on that here http://stackoverflow.com/a/8488316/3571997 – Trevi Awater Jan 30 '15 at 10:51
  • Thank you, @Alagaros. So in other words, use JavaScript, detect the pixel ratio, and load the appropriate CSS and ignore the (useless) media css query? – Simon Ferndriger Jan 30 '15 at 10:58
  • 1
    Yes, that is how I would do it :) – Trevi Awater Jan 30 '15 at 11:00
  • @Alagaros Alright, I think this is what I'm going to do! I like it :) – Simon Ferndriger Jan 30 '15 at 11:11
  • What's wrong with using the width? Consider < 768px all mobile. http://www.lexus.ca is a good example of responsive website – Huangism Feb 09 '15 at 21:08
  • @Huangism Well, the iPhone 6 Plus for example has a 1920-by-1080-pixel resolution. So this is exactly not <768px. – Simon Ferndriger Feb 11 '15 at 06:08
  • @SimonFerndriger that's not the width in the browser, view lexus.ca on iphone 6+ and you get the mobile version. We also have `` Here look for yourself http://viewportsizes.com/?filter=iphone view port width is what matters – Huangism Feb 11 '15 at 13:52

2 Answers2

2

You can't use centimeters because some devices have their pixels further apart.

However what you could do is check the device's pixel density. Here is how you can use a media query with the pixel density.

@media all and (min-resolution: 150dpi) 
{
   body 
   {
      // do something
   }
}

The second way would involve some JavaScript as described here.

Trevi Awater
  • 2,387
  • 2
  • 31
  • 53
0

Media query in pixels is all you need. Screen resolution and viewport width are 2 different things.

You can check http://viewportsizes.com/?filter=iphone for view port width. The link has the iphone filter but you can remove it to look at other phones.

I usually use 768px as a cut of point. Anything above or equal to 768 I use a desktop view and anything below I use a mobile layout. It's not device-dependent, you are simply checking the view port width or browser width to determine what should be shown.

http://www.lexus.ca uses this cut off point, I am just linking this to give you an example

Huangism
  • 16,278
  • 7
  • 48
  • 74