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

this may be because of the addons you installed on your browser. remove or hide all addon icons from the tool bar and try re size. when there are addons browser only resize the address bar and keeps the addons visible.

Update: 7/14/2013

---

With the latest chrome version, now you can re-size the address bar and it will hide the addons automatically.

Answer 2

I found a quick workaround for this.

Just install the Responsive Web Design Add-on to Chrome, and it will open a separate window without the address bar and tabs, which can be scaled down to 10 px or less.

Link here: https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related

Answer 3

A lot of smart phones scale the page to fit into their screen size using zooming. Your minimum page width is probably 400px. Without any example code, I think that's all that can be said.

Answer 4

in chrome the icons of your addons in the top right corner cause the problem

-> resize the adress-bar (where you type the urls) to maximum width (drag the bar at the right edge to the right)

or disable the icons

Answer 5

I like this tool because it lets you switch quickly and also switches between portrait/horizontal easily for mobile sizes. It also allows you to make a personalized bookmark let, so if you design for obscure resolutions frequently, you can save them and use them.

I had to use one of these tools because even with the above answer I couldn't get my window to scale to 320 properly, this tool seems to be a faster solution overall.

http://lab.maltewassermann.com/viewport-resizer/

Answer 6

In case you want to reduce your screen width to emulate different devices (and why else would you want to do this?):

Chrome now has an Emulation section in its inspector, activated by clicking the little phone icon in the top menubar (between the magnifying glass and Elements):

Emulation mode allows you to set the viewport size to all common mobile screen sizes, among other nice features, like emulating touch, geolocation and even accelerometer input: