CSS if Zoom in / Scale above 100%

Is it possible to have a media query based on the zoom / scale level.

i.e. If a user zooms in on an iPhone I would like to make css adjustments on a class.

Is this possible?
petewinterAsked:
Who is Participating?
 
COBOLdinosaurCommented:
This page: http://foundation.zurb.com/docs/media-queries.html

Has a group of examples along with comments indicating the pixel equivalents.

The em unit is the value of the height of the font in use, so when the page is zoomed the height of the font and thus the value of the em changes so a page can respond to the zoom.

Cd&
0
 
COBOLdinosaurCommented:
The basic solution is to use em instead of pixels for the unit of measure in the media queries.  However webkit browsers like Chrome and Safari, have at least one bug that makes them unreliable when zoomed.  There may be a solution using SASS, but I don't use SASS, so I have never experiment with it to see if it is a solution, or new problems to solve.

Cd&
0
 
petewinterAuthor Commented:
Thanks for the reply. Can you please show me an media query example using em? Can it be something like... If greater than 100%...
0
 
petewinterAuthor Commented:
Thanks for the help
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.