Responsive Site Zooming Issue

[Sikh]

Hey neowinians,

This isn't the "normal" zooming issue where mobile can't pitch to zoom. This issue is in desktop when someone zooms, the design / layout doesn't zoom, just the text does.

This is my first fully responsive design after a couple years off from web design / programming. I have been keeping up so I'm aware of all the new things in CSS3, the viewport meta tag and media queries.

The design works great on all resolutions. From mobile at 720p to my 2k monitor, the site looks great and functions like its suppose to.

This issue definitely has me stumped. I released the website to a bunch of friends I know and only one friend mentioned "when i zoom in on desktop, it just changes the font size and not the actual page" and I thought that was interesting. I zoomed in and same thing. Now we are specifically zooming in the page and not text size. One of the search results on Google pointed out to make sure your zooming page and not text size so I did.

I haven't tested pinch to zoo try because I've been trying to fix this on desktop first.

I am currently on my way to a concert so taking a break and wanted to post this to see what you guys recommend I should look at / do.

Any resources are appreciated. Anything I've googled hadn't come back with what's specifically happening to me so I'm not sure what to search for.

Sikh

[ZakO]

Are you using pixels for media query breakpoint sizes? Using ems (or rems) in media queries should prevent the layout breaking if a user zooms in. It actually shouldn't be necessary, but some rendering engines behave differently (incorrectly). 

 

Here's an old but still semi-relevant article about it: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

 

It's hard to say for sure without actually seeing the website.

[Sikh]

I'm using percentages for the entire layout. So the main container is 75% of the browser window and from their any element inside that container is also using percentages.

If you don't mind helping I can pm you a link so you can take a look and let me know what you think.

Thanks for the link in going to take a look at it now and see if it relates to what I'm seeing

[Sikh]

Wow. Already learning a lot. I finally know what the general equation for percentage / ems to pixels is. I've been looking for this but no ones made it easy to find / understand.

But what I'm also learning is I'm not having the issue normal people would have because I'm using percentages and my responsive elements actually work correctly.

I'm considering switching to EMs as a challenge to myself but well see. For now I'm leaving it like it is until the problem I'm having is resolved.

[pqt]

Wow. Already learning a lot. I finally know what the general equation for percentage / ems to pixels is. I've been looking for this but no ones made it easy to find / understand.

But what I'm also learning is I'm not having the issue normal people would have because I'm using percentages and my responsive elements actually work correctly.

I'm considering switching to EMs as a challenge to myself but well see. For now I'm leaving it like it is until the problem I'm having is resolved.

 

For the sake of your sanity I'd recommend rem values.

[The_Decryptor Veteran]

There is no general equation for EMs to pixels, it depends not only on the font size, but also what font you're using and how the font-size is applied to the element you're styling. You should really be able to mix and match units, I don't know of any browser that gets them wrong, because they're pretty fundamental to the web (Last browser I know of that behaved strangely was IE6). Pixels should still scale with the zoom value, so if you're zooming in to 200%, then all pixel values should be twice the size, etc.

Anyway, got a link to the actual site?