how does "responsive design viewer" read media queries?
I am very curious about Firefox's "responsive design viewer" (which I was very slow to discover as it appears to have around for some time.) I would ask this in the developers forum but I don't know my way around "over there."
First I LOVE RDV! I discovered it just when I needed it in my work and making several websites "mobile friendly."
I have used it now extensively and realize that it is far different then simply resizing browser dimensions as it responds to all the CSS3 media queries, whereas simply resizing any browser (even Firefox) will only respond to some of them and makes all those bogus "put your webpage in our frames" emulators to shame.
It is MORE than what is said on the developer page: https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View "Of course, you could just resize the browser window: but making the browser window smaller makes all your other tabs smaller too, and can make the browser's interface much harder to use."
You can see an example here, if you don't mind a link (and if you do just remove it): http://www.wcwcw.com/formmailer/form.php
O.K., two things are happening that don't happen when you just resize a browser or use bogus frames emulators. First, the menu, that takes up most of the initial screen, has its font enlarged (to try and satisfy Google PageSpeed Insights separation of links...still working that out) and 2nd, the text input box is resized by CSS3 media queries so it fits into the viewport. Neither of those things happen in "resizing" the browser but do render in RDV.
So I am extremely interested in how this is being accomplished. Something more than a convenient way to resize browser windows is going on. I am not asking for trade secrets or anything. I am just interested in how RDV in Firefox can successfully do that! RDV is the only tool I have that "agrees" with Google PageSpeed Insights about view ports.
I am just crazy curious to understand what is going on ;-) (and I hope that doesn't turn into an "emoticon.")
Kind Regards, Axis
Chosen solution
Hello guigs2--
I actually have read both those links thoroughly, but I realized after posting that I asked an unanswerable question...like..."how come this works?"
It is an awesome bit of coding. I'll mark this as solved because I don't think anyone but the developers can explain to me my original "two things are happening" question.
Thanks for discovering the "unanswerable question" and bothering to reply.
- -)
Regards, Axis
Read this answer in context 👍 1All Replies (3)
To get started, please see MDN 's documentation on this: https://developer.mozilla.org/en-US/d.../Responsive_Design_View and MDN Web Development Responsive Web Design
Also, everything is open source, please feel free to poke around the code and see what you think.
Chosen Solution
Hello guigs2--
I actually have read both those links thoroughly, but I realized after posting that I asked an unanswerable question...like..."how come this works?"
It is an awesome bit of coding. I'll mark this as solved because I don't think anyone but the developers can explain to me my original "two things are happening" question.
Thanks for discovering the "unanswerable question" and bothering to reply.
- -)
Regards, Axis
You might want to look at some of the source code and bugs on Bugzilla.
- resource:///modules/devtools/responsivedesign.jsm
- https://bugzilla.mozilla.org/buglist.cgi?product=Firefox&component=Developer%20Tools%3A%20Responsive%20Mode&order=bugs.bug_id%20desc
- bug 890195 - [responsive mode] device-width media queries should use the page width, not the actual device width