How to allow user to zoom in and out without affecting the viewport size?

[nada]

My media queries depend on width and i have 6 break points for each one i generate new html ,the html is updated correctly but after zooming in or out the css is still reading from the wrong media query because the width has changed after zooming

um working with javascript+css+html

[Atelierbram]

Do you have a demo of this, or a link to a live site?

[nada]

Hi Atelierbram,

It is bit complicated and very big but here is some code i hope you get anything from it ,,my problem is how to make media queries don’t depend on width only but in the same time i cant repeat the css for each device pixel ratio

http://codepen.io/nadazz/pen/jyNvew

[Atelierbram]

Sorry, but I can’t see from this demo how page-zooming would affect anything, nor can I make out from this demo what the problem really is, since there is no HTML content, and just empty media-queries in the CSS.

So just my two cents here, probably not much related to page zooming at all. A known issue with declaring media-queries both in CSS and in JavaScript is the differences in calculated width of the browser-window, maybe because of the scrollbar (and the differences between different browser scrollbars), so these widths can’t be calculated consistently across browsers, along with the media-queries kicking in at different widths – in CSS and in JavaScript.

So yes, things can get complicated very fast if one is going to generate HTML from JavaScript, within JavaScript media-queries. In that case IMO it’s best to take the information from the JavaScript from the moment the JS-mediaquery kicks in, to set a class on the html – or body-tag, to inform the CSS (so don’t use CSS media-queries for this).

You can also use a JavaScript media-query library for this purpose, like “metaquery“. Here is a demo, (note how the media-queries are defined in the head of the document within meta-tags: look behind the HTML-tab gear icon).

[nada]

First of all thanks for your help
second..simply,the page -zooming is affecting the width so the wrong media query is applied
as you said “to set a class on the html – or body-tag, to inform the CSS (so don’t use CSS media-queries for this).” and you are right & i tried this solution but it requires repeating 6 css versions for everything as there will not be a hierarchy,,i mean no css will inherit from the previous

that solution was my last choice to use but i needed to ask and search if there is another ,,in a previous post someone was having the same problem & said it was solved but did’t say how

[Atelierbram]

i mean no css will inherit from the previous

OK, so the solution for this would be to only set min-width media-queries (related to the so-called “mobile-first” approach). In that way the css from within any media-query will inherit from the one before. I made a fork of my demo and this works; for it removes the classes on the html element which no longer apply, and keeps the ones which do. Then in the css it would be a matter of keeping a strict order of classnames, (in my example from one to thirteen) to use the cascade and inheritance to override previous set values. Still complicated, but manageable if this is consistently applied.

[nada]

Done,,thank you

[Atelierbram]

@nada glad to be of help. Can you share an example of this? I’m curious.

[nada]

i don’t have problems with sharing the code at all :D but its complicated ,,for example um not using html but jsx tags instead and the project hierarchy is a bit different

http://codepen.io/nadazz/pen/zNOeBe

but anyway now um using classes for the page tag as selectors and canceled using media queries

still have small issue because there were nested media queries but it will be solved i hope

[nada]

for more info go to
http://www.webmix.ca/ (still a demo and this is the old published version)
and zoom out to 75% in chrome,,you will notice the problem

[Atelierbram]

Single pager, looking quite nice already. Custom elements using web-components? Advanced stuff … haven’t really dipped my toes in there myself yet. Talking about complications: you people don’t shy away from it ;)

[nada]

Thanks alot :D

[Author]

Posts