Browser doesn't scale below 400px?

Question

I'm working on putting together a liquid style-sheet and it works wonderful. One thing that I've noticed is that my browser window in Chrome won't resize below 400px it just gets stuck there and in FF as I scale down it it just stops at around 400px and then pops a horizontal scroll bar.

When I open the site on my phone it looks perfect at around 320px, so I know it does scale lower than 400px.

I was curious if anyone knew if this was a browser/desktop thing or if I should be looking at something other than my CSS. I don't have any min-width declarations so i'm not sure what could be causing this.

Again on desktop it scales down to a min-width of about 400px and stops, but when I open it up on my phone it scales to the size of the phone screen which is roughly 320px... curious why at the very least it won't scale down to the 320px on desktop.

-edit- Also I'm not sure if this matters but Opera allows it to scale down to pretty much nothing... So it works with Opera and not in Chrome or FF... any ideas?

Answer 1

The DevTools in Chrome have moved on substantially from when most of these answers were posted. The best way to address this issue now is to use the emulators that are built into Chrome.

To use the emulators open DevTools (press F12) and then click on the following icon to toggle the Device Toolbar:

This will then allow you to emulate whichever mobile device or viewport size you want to.

Answer 2

nayan9's solution works great, and can be put into a bookmark without having to create a html file. In Chrome, create a new bookmark with URL:

javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();

And give it a name of "Open Small Window" or something similar. This will allow you to easily open windows without size restrictions within chrome. Note that just copying this into your address bar won't work - chrome strips the "javascript:" out.