CODEWITHSUNDEEP
cssresponsive-designmedia-queries
Simon Ferndriger
Simon Ferndriger

Reputation: 4962

CSS Media Query in cm Possible? -OR- How to easily create specific CSS for ANY smart phone?

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.

Upvotes: 2

Views: 359

Answers (2)

Huangism
Huangism

Reputation: 16438

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

Upvotes: 0

Trevi Awater
Trevi Awater

Reputation: 2407

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.

Upvotes: 2

Related Questions