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

I am lazy, to make it even easier, let the bookmarklet ask the user for sizes :-D

javascript: (function() {var width = prompt('Enter window width:', '320');var height = prompt('Enter window height:','480');var url = prompt('Enter window URL');if (url.indexOf(':') < 0) {url = 'http://'+url;} window.open(url, '','width='+width+',height='+height);})()

Answer 2

I was stumped as well but ended up with a simple solution. I just created a HTML file with a link to open a new window:

<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>

This new window has nothing but the address bar and Chrome lets me freely resize this down to 111x80.

Answer 3

Adding to what nayan9 and drinkdecaf said, you can just throw document.URL into the call to window.open to see the page you're currently viewing in the 320 window. You might want to add some more to the width if you're expecting a scrollbar.

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

Answer 4

Another easy solution is to click Strg+Shift+N to enter Incognito Mode. There you can resize your Browser window as you like.

Answer 5

I'm always running into this issue with pinned tabs. Chrome will not resize below a horizontal width of eight visible pinned tabs if there are any! Just detach the tab that you want to resize to solve this ...

Answer 6

Chrome cannot resize horizontally below 400px (OS X) or 218px (Windows) but I have a really simple solution to the problem:

1. Dock the web inspector to the right instead of to the bottom
2. Resize the inspector panel - you can now make the browser area really small (down to 0px)

Update: Chrome now allows you to arrange the inspector windows vertically when docked to the right! This really improves the layout.

The HTML and CSS panels fit really well and you even open a small console panel too. This has allowed me to completely move from Firefox/Firebug to Chrome.

If you want to go a step further look at the web inspector settings (cog icon, bottom-right), and goto the user agent tab. You can set the screen resolution to whatever you like here and even quickly toggle between portrait and landscape.

UPDATE: Here is another really cool tool I've come across. http://lab.maltewassermann.com/viewport-resizer/