Media Queries for Different zoom Levels of Browser

by

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.

More Related Contents:

  1. What are the steps to make a HTML design responsive? [closed]
  2. IE8 support for CSS Media Query
  3. What can be other ways than @media to make a website responsive suitably if I don’t mention target resolution? [closed]
  4. how to make responsive website for all devices [closed]
  5. Why does my design elements look different in all browsers? UPDATE [closed]
  6. Bootstrap row with columns of different height
  7. Vertically align an image inside a div with responsive height
  8. Grid of responsive squares
  9. Responsive grid of hexagons
  10. Why are my CSS3 media queries not working on mobile devices?
  11. Responsively change div size keeping aspect ratio [duplicate]
  12. Maintain aspect ratio of div but fill screen width and height in CSS?
  13. Is it possible to put CSS @media rules inline?
  14. Maintain the aspect ratio of a div with CSS
  15. Shape with a slanted side (responsive)
  16. Fixed background image with ios7
  17. Responsive Separator for Horizontal List
  18. Background image not showing in Safari
  19. CSS media queries for screen sizes
  20. Hiding elements in responsive layout?
  21. Mosaic of images HTML/CSS
  22. Responsive tables, the smart way
  23. Auto height on parent container with Absolute/Fixed Children
  24. What is the best way to move an element that’s on the top to the bottom in Responsive design
  25. How to make responsive table [closed]
  26. Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques [closed]
  27. Load a low-res background image first, then a high-res one
  28. Media queries not working inside an iframe
  29. @media queries and image swapping [closed]
  30. The difference between HTML media queries and CSS media queries

Leave a Comment