About responsive sites, pixels, and density

Question

I have coded a responsive website, in which I have CSS media queries to detect the screen size(pixels) of the device the user is navigating with.

Just standard medias. Example:

@media (max-width: 1199px){
  /*code*/
}
@media (max-width: 991px){
  /*code*/
}
@media (max-width: 767px){
 /*code*/
}

When I test my website with my mobile, which is a Samsung Galaxy S4 with 1920x1080 pixels my website shows me the mobile version, which is in this case the @media query with a max-width of 767px.

I understand that most things would be too small to read or be seen if my mobile respected exact measures like 12px font size.

So my question is, how do I control which version of my website is shown on high resolution devices, because pixels media queries aren't working in my case.

Answer 1

@media (max-width: 1199px){
  /*code*/
}

The max-width property in the media query works a little different. It is not the resolution of the screen. It is equivalent css pixel.

Here are a couple of articles.

A pixel identity crisis.

A pixel is not a pixel is not a pixel.

moz media query page.

If you want to target device resolution you should use

@media all and (max-device-width: 320px) {

}.

max-device-width:This property measures the device-width. If you write css using media query using this it will get a little complex (mobiles tabs and even desktops can have 1080p resolution screens). In order to target device resolutions you might have to look into properties like -device-pixel-ratio , orientation and device-height to give better control of layouts

Answer 2

The problem might be that you didn't include a viewport meta-tag

<meta name="viewport" content="width=device-width">