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 j

Answer 1

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 2

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 3

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.

Answer 4

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:

Answer 5

I've been experiencing similar issues and just found a good work around. Open up your chrome devtools and in the top left, there's a little screen and ipad icon. Click that and it opens a mobile view of your page. You can set it to predefined devices or a custom resolution. Pretty nifty actually.

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/