Media Queries For Different Zoom Levels of Browser

Media Queries for Different zoom Levels of Browser

After a lot searching. I found my answer.

We don't need to target browser zooming explicitly by using media queries. When we zoom into our browser it behaves as different devices.

For eg: If we zoom at level 175% the pixel width of our screen size is 732px ( You can find relation between zooming and pixel width at mqtest.io [archived] ) which is nearby 768px of ipad mini.
therefore you can target both Ipad mini and browser zooming(@175%) by using a common media query

i.e @media screen and (min-width:732px)

So if you target different devices using media queries (make site responsive for different Devices) then your browser zooming is itself taken into account.

Media queries + browser zoom

Inspecting the <html> element holds the answer:

screenshot

So the page width is actually greater than 1024px and less than 1025px.

I suggest using the exact same values for both min-width and max-width.

This covers all widths, without gaps, and if there is a collision (i.e. the page is exactly 1024px wide) then whichever rule appears later in the document should take precedence.

Controlling Media Queries based on zoom of browser window

That functionality is actually built into CSS media queries already. As a proof of concept, play with the magnification in your browser with this JSFiddle open.

At 50% magnification six boxes are visible, at 100%, there are only three. Note that this behavior will vary across devices.

Hope this helps!

<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>
<div class="box five"></div>

body {
  width: 100vw;
}

.box {
  width: 50px;
  height: 50px;
  background: #555;
  display: none;
}

@media only screen and (max-width:680px) {
 .box {
    display: inline-block;
  }
}

@media only screen and (min-width:681px) {
  .one, .two, .three {
    display: inline-block;
  }
}

Media Queries For Different Zoom Levels of Browser