Problem
I’m putting together a liquid style sheet, and it’s working great. One issue I’ve observed is that my Chrome browser window won’t shrink below 400px; it just stays there, and when I scale down FF, it just stops at roughly 400px and then opens up a horizontal scroll bar.
I know it scales lower than 400px since when I access the site on my phone, it looks perfect at around 320px.
I was wondering if anyone knew if this was a browser/desktop issue or if there was something else I should be looking at outside my CSS. I’m not sure what’s causing this because I don’t have any min-width declarations.
It scales down to a min-width of about 400px on desktop then stops, but when I open it on my phone, it scales to the size of the phone screen, which is roughly 320px… wondering why it won’t scale down to the 320px on desktop at the very least.
-edit- Also, I’m not sure whether it makes a difference, but Opera allows you to scale it down to almost nothing… So it only works in Opera, not in Chrome or Firefox… any suggestions?
Asked by Brodie
Solution #1
Chrome can’t resize horizontally below 400px on OS X or 218px on Windows, but I’ve got a quick fix for it:
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 are well-placed, and you can also access a small terminal panel. This has allowed me to switch from Firefox/Firebug to Chrome altogether.
If you want to take it a step further, go to the user agent tab in the web inspector settings (cog icon, bottom-right). You may change the screen resolution to anything you like and switch between portrait and landscape mode instantly.
UPDATE: Here is another really cool tool I’ve come across. http://lab.maltewassermann.com/viewport-resizer/
Answered by Oisin Lavery
Solution #2
It’s possible that this is due to the addons you’ve installed on your browser. Try resizing after removing or hiding all addon icons from the toolbar. When there are addons installed, the browser simply resizes the address bar to make the extensions visible.
Update: 7/14/2013
With the current Chrome version, you can now resize the address bar and it will automatically conceal the extensions.
Answered by Chamika Sandamal
Solution #3
I was perplexed as well, but found a simple answer. I simply made an HTML document with a link to a new window:
<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>
This new window contains only the address bar, and Chrome allows me to resize it to 111×80 pixels.
Answered by nayan9
Solution #4
nayan9’s approach is excellent, and it can be added to a bookmark without the need for an html file. Create a new bookmark in Chrome using the following URL:
javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();
Give it a name like “Open Small Window” or something along those lines. This will allow you to open windows in Chrome without size limits. It’s worth noting that pasting this into your address bar won’t work because Chrome removes the “javascript:” part.
Answered by drinkdecaf
Solution #5
If you wish to imitate multiple devices by shrinking your screen width (and why wouldn’t you?) follow these steps:
Chrome’s inspector now includes an Emulation section, which can be accessed by clicking the small phone icon in the top menubar (between the magnifying glass and Elements):
Emulation mode lets you to customize the viewport size to all popular mobile screen sizes, as well as imitating touch, geolocation, and even accelerometer input, among other useful features:
Answered by gl03
Post is based on https://stackoverflow.com/questions/8681903/browser-doesnt-scale-below-400px