when page is 100% zoom, CSS Media Query doesnt' work

Question

I have 2 mediaquery.

@media screen and (max-device-width: 1199px) {
  #content-id {  
      height: 480px !important;
      background: rgb(16, 25, 100);
      width: 99%;
      border-radius: 5px;
      margin-top: 0px;
      max-height: 30%;
    }
}

2:

@media screen  and (min-device-width: 1200px) {
  #content-id {   
    height: 580px !important;
    background: rgb(124, 57, 57);
    width: 99%;
    max-height: 30%;
  }
}

As you can see the backgorund and height are difrent. They have to change when the page size is changed.

I use Chrome. When i smalled the page manually with mouse, it doesn't work. Browser's zoom is 100%. But i press right click and do inspect. After when i set devices (ipad or responsive etc.), it's work. If i did that, zoom is smaller than 100% automaticly.

So, I think page's zoom cause this problem. But I couln't fix that. Could you help me?

Do you really need to use device width? If not, try it with just max-width. See also this question: https://stackoverflow.com/questions/18500836/should-i-use-max-device-width-or-max-width — Emaro, Oct 22 '21 at 08:24
@kian Why not? Media queries form a very vital function when used correctly, and in fact many top standards recommend them... I've never heard of them being referred to as 'not best practice'. — Lee, Oct 22 '21 at 11:15
@Lee i mean it's better to develop website mobile first, not separate like this. there are too many article about it. — kian, Oct 22 '21 at 12:11

score 1 · Accepted Answer · answered Oct 22 '21 at 08:26

Try changing your media queries to something more simpler by removing 'screen' and changing 'max-device-width' to 'max-width' and 'min-device-width' to 'min-width'

@media (max-width: 1199px) {
  #content-id {  
      height: 480px !important;
      background: rgb(16, 25, 100);
      width: 99%;
      border-radius: 5px;
      margin-top: 0px;
      max-height: 30%;
    }
}

@media (min-width: 1200px) {
  #content-id {   
    height: 580px !important;
    background: rgb(124, 57, 57);
    width: 99%;
    max-height: 30%;
  }
}

score 1 · Answer 2 · answered Oct 22 '21 at 08:41

max-device-width and min-device-width are deprecated in media queries 4, you are testing against your device width which is fixed ,so one of the styles will never be applied. try using max-width instead and for the normal screen no need for media queries

@media (max-width: 1199px) {
  #content-id {  
      height: 480px !important;
      background: rgb(16, 25, 100);
      width: 99%;
      border-radius: 5px;
      margin-top: 0px;
      max-height: 30%;
    }
}


  #content-id {   
    height: 580px !important;
    background: rgb(124, 57, 57);
    width: 99%;
    max-height: 30%;
  }

you can check more about media queries in : https://learnjsx.com/category/1/posts/mediaQueries

Be cautious that removing the media query for one of them, might affect other things in his code. Better to leave as is, unless there's specific info saying that it should be okay. (I would leave the queries as is). — Lee, Oct 22 '21 at 08:48

when page is 100% zoom, CSS Media Query doesnt' work

2 Answers2