Why does Firefox have a min-width minimum of 615px?

3
votes

I'm extremely new to Media Queries so I was playing with the min-width: attributes with my Firefox 12.0 and noticed that it just wasn't working. After some playing around and after experimenting with this lovely website

http://barrow.io/lab/media-query-viewport/

I found out that the minimum min-width that my Firefox supports on my machine (it's an XP box) is 615px. Why? I'm trying to play with Media Queries so that I can make a website that works well on many devices as well as desktops. This includes devices that are 480 and 320 pixels wide. With Firefox not allowing me to test the smaller widths it's going to seriously affect my development.

Is there any kind of a work-around for this other than trying a different browser?

Thanks.

EDIT: Now that my Firefox has gone through a few upgrades (now at v22) this is not longer a problem. I'm glad it got fixed.

4
firefoxmedia-queriescss
Extensions that augment the navigation bar (e.g., Firebug, Colorzilla, LastPass, Web of Trust) greatly worsen this problem. The best solution I've seen among the three Stack Overflow questions related to this problem: View > Toolbars > Hide the navigation toolbar. Quick keyboard shortcut to toggle the nav bar in Firefox for Windows: hold Alt then press V, T, N. See also stackoverflow.com/questions/8286680/… and stackoverflow.com/questions/7663005/…. – Andy Giesler
On Firefox 35+ go to Menu > Developer > Responsive Design View. Includes presets for common smartphone resolutions as well. – andreszs

4 Answers

3
votes

As of this: http://support.mozilla.org/en-US/questions/772847#answer-125895, Firefox supports no more than 480 width, so if you want to test for 320 px, you must use a different browser. I would point out that if you want to test smartphones on your site, you should be using smartphone browsers on smartphone hardware... not just desktop browsers set to really small resolutions, which is what it sounds like you were trying to do.

2
votes

There's a simple workaround: load the site in an iframe of your desired width.

Oh, and as for why, the behavior you observe is due to the Firefox user interface not shrinking down below a certain width for some reason. Often due to extensions mucking with the UI.

1
votes

Here is the simple solution

install chromEditPlus Plugin from here http://webdesigns.ms11.net/chromeditp.html

And then Goto Tool-> ChromEdit Plus-> ChromEdit select userChrome.css pannel

copy and pate below code Save then restart

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

    #main-window:not([chromehidden~="toolbar"]) {
      min-width: 200px !important;
    }

Thus solved the Problem this made your windows minimun to 200px

Thanks

0
votes

Use the Web Developer toolbar extension and you can see a selection of common screen sizes by selecting Resize > View Responsive Layouts