Media queries and browser zooming trouble

[Bimbata]

Hi guys! We made scalable website using media queries. Something like that: @media screen and (max-width: 120em) { body { font-size: 100%; } } @media screen and (max-width: 114em) { body { font-size: 95.791%; } }

When we resize browser it keeping aspect ratio of block elements and scale font size. But when we became to zoom website using Ctrl+ “+” we saw that web page elements decreased! It happens, because when we increase zoom, width of browser becomes less and @media queries decrease body font-size.

You can see the same issue example on this site: http://fittextjs.com/

Could anybody help me?

[Paulie_D]

Zooming is not the same as browser re-sizing and is not affected by Media queries unless, I think, you are using ems.

https://css-tricks.com/zooming-squishes/

[Bimbata]

Yes, we are using ems, we need it. I read this article, but it describes flexible website but not scalable website. The main container of our website has vertical and horizontal alignment and when we resize browser it always fits inside the body and doesn’t change the proportions between height and width. Text and graphics inside container are scalable too.

Media queries really cover browser zoom. I found only proposals, it looks like:

@media screen and (min-zoom: 2) {....}

I don’t know, how long we have to wait this zoom feature for media queries.

[Bimbata]

Well, now it works. All, what we need – use ‘query width in ems’.
https://bugs.webkit.org/show_bug.cgi?id=41063

[Author]

Posts