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. E

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">