This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

how does "responsive design viewer" read media queries?

  • 3 cavab
  • 1 has this problem
  • 1 view
  • Last reply by cor-el

more options

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

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 👍 1

All Replies (3)

more options

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.

more options

Seçilmiş Həll

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

more options

You might want to look at some of the source code and bugs on Bugzilla.