48

I am a newbie to responsive design using CSS3 media queries. I clearly understand how we target different devices using these media queries but the place where i am confused is BROWSER ZOOMING!!.

For Eg: This is my normal body css rule

#body {
    margin: 0 auto;
    width: 70%;
    clear: both;
}

and when i want to change this css rule to target a devices whose width falls in the range of 150px and 600px i add this particular media query.

@media only screen and (min-width:150px) and (max-width:600px){

#body {
    margin: 0 auto;
    width: 90%;
    clear: both;
}


}

Problem: I am using Google Chrome and when i zoom in to about 200% then this particular media query comes into play.

How do i know what media queries to write for different zooming levels or to put another way whats the relation between browser zooming levels and pixel width.

bhavya_w
  • 9,186
  • 9
  • 29
  • 38
  • Here's an article on this subject: http://blog.55minutes.com/2012/04/media-queries-and-browser-zoom/ – Billy Moat Mar 06 '14 at 12:43
  • @BillyMoat thanx for your comment. I read the whole article but the context there is different to what i am looking for ( problems with using px in media queries ). – bhavya_w Mar 06 '14 at 13:55
  • @BillyMoat need some thing like say for 200% zooming level the max-width used in media query is 600px and for 400% zooming level the the max-width is 300px. An Article may be which tells us...for 250% zoom on chrome use this media query...for 300% zoom use this particular media query. – bhavya_w Mar 06 '14 at 14:03
  • According to [1], it seems the horrible bug that Chrome had (see [2]), was solved since version 27 [1] http://alastairc.ac/2012/01/zooming-bug-in-webkit/ [2] http://code.google.com/p/chromium/issues/detail?can=2&q=&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=&id=86155 – David L Oct 03 '14 at 21:10
  • take media-query as device width and not width. – Mahi Jun 07 '17 at 11:37

2 Answers2

61

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.

Baum mit Augen
  • 49,044
  • 25
  • 144
  • 182
bhavya_w
  • 9,186
  • 9
  • 29
  • 38
  • This doesn't appear to be true on mobile browsers. On desktop, `$(window).width()` changes as you zoom, so you go through media queries when zooming. But on mobile, this isn't the case, at least on iOS. – Patrick St.Onge Dec 10 '15 at 15:03
  • 1
    If you have a default zoom of say 125% in chrome the media q's don't work correct. – SuperUberDuper Dec 05 '16 at 13:34
  • @SuperUberDuper...What do we mean by media queries don't work correct ? Afaik, there's no defined relationship b/w zoom levels and media queries. What we know for sure is that media queries change ( target devices ) for different zoom levels. – bhavya_w Dec 05 '16 at 15:19
  • 2
    @SuperUberDuper the problem usually appears if you have based your breakpoints while looking at a ZOOMED version of the page you are designing. If all breakpoints are measured while at 100% most if not all browsers will behave as expected even though they might seem to fire breakpoints at different PX measurments. Internally they have probably compensated for other changes like height of inline elements etc. – GiorgosK Oct 18 '18 at 09:45
  • I had the same problem but as you rightly say the actual problem was elsewhere. If you want you can do this ```@media (-webkit-min-device-pixel-ratio: 2), /* Webkit */ (min-resolution: 192dpi) /* Everyone else */ { ... }``` where 192 = 96 x 2. However I am not sure how useful this is in real terms as it is probably better to keep your media queries consistent and just target min width and multiples of – Daniel Jul 15 '21 at 16:32
0

I solved like that (.scss)

@media only screen and (min-height: 500px) and (max-height: 800px) and 
 (min-width: 600px) {
  margin-top: 0px;
}
sawacrow
  • 166
  • 9