Browser doesn't scale below 400px?

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.

vertical panel layout setting

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.

Inspector docked to right with vertical panel layout

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.

Device resolution settings

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


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.


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.