为提升您的使用体验,本站正在维护,部分功能暂时无法使用。如果本站文章无法解决您的问题,您想要向社区提问的话,请到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 提问,我们的支持社区将会很快回复您的疑问。

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

how does "responsive design viewer" read media queries?

  • 3 个回答
  • 1 人有此问题
  • 1 次查看
  • 最后回复者为 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

被采纳的解决方案

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

定位到答案原位置 👍 1

所有回复 (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

选择的解决方案

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.