161

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?

manatwork
  • 1,569
  • 1
  • 28
  • 28
Brodie
  • 7,569
  • 8
  • 32
  • 54
  • I think I have experienced similar behavior in general from desktop browsers. (on mobile now; can't verify) – Andrew Barber Dec 30 '11 at 16:59
  • Do you have some code or a link to an example? – robertc Dec 30 '11 at 16:59
  • 1
    I remember that Chrome used to be collapsible to a tiny brick. So this is something that was purposefully introduced. On current Chrome I see that window will only get as small as top row of icons. Hiding home button or extension icons lets me get it a bit smaller. – mrtsherman Dec 30 '11 at 17:00
  • @mrtsherman On this site I get a scrollbar at less than 1000px, so yes I do need code. – robertc Dec 30 '11 at 17:01
  • @mrtsherman: I actually remember this - I had starred the issue for myself: http://code.google.com/p/chromium/issues/detail?id=9885#c74 – josh.trow Dec 30 '11 at 17:04
  • I'm in Safari 4.1.3 (Mac) and window can only be shrunk to 378 px W x 155 px H. That's the actual viewport without scroll-bars included in measurement. – Sparky Dec 30 '11 at 17:05
  • @robertc - touche. http://blankwebsite.com/ - This one goes down to 200px for me in Chrome. FF gets even smaller. No scrollbar. So you are right. Something in his code is causing it. – mrtsherman Dec 30 '11 at 17:05
  • I'm not seeing scrollbars in Firefox or Chrome here until I get down to the width of the `div` (which is `250px`): http://jfcoder.com/test/test1.html – Jared Farrish Dec 30 '11 at 17:05
  • @robertc what code would you like? It's a huge site and the branch I'm working on is only on our local server at the moment. I can put in some code, but are there specific elements you want to see? I hate to ask such a vague question, but I'm not sure you want me to post all of it. – Brodie Dec 30 '11 at 17:07
  • 7
    This is going to be something specific about your css and markup. Without *anything* to review, there is no question. Shooting guesses in the dark is not really a useful approach. In that case, you'll need to debug on your own. – Jared Farrish Dec 30 '11 at 17:10
  • I'd like to see the specific elements which are forcing a minimum width of 400px, but if you can work out what those are then you'll have answered your own question. – robertc Dec 30 '11 at 17:13
  • There isn't anything with a min-width of 400px, I have a couple elements with min-widths of 100% but that's about it. In Opera is scales down to 260px extremely nicely and I haven't really put anything in to catch below that, not sure if I need to. Anyhow, would it be safe to assume it's a browser issue? – Brodie Dec 30 '11 at 17:27
  • 3
    Yeah, I'm pretty sure that is just the browser window's own literal minimum width, just like most any program has a minimum width it allows itself to be resized to. My Chrome appears to not be able to resize any smaller than a 250px viewport. – justisb Jan 08 '12 at 03:59
  • With Chrome 31, it seems that the default min width is 320px instead of 400px. – CWSpear Nov 15 '13 at 02:53
  • 1
    Chrome 33 has set it back to 400px – Sparkup Feb 25 '14 at 13:14
  • Yes, it's a default Chrome settings not allowing the browser to resize less then 400px. This is very annoying when creating responsive websites and testing for screens of 320px.. Chrome dropped the ball on this one. – MuhuPower Mar 12 '14 at 16:11
  • 7
    "This is going to be something specific about your css and markup"... Ehm no actually it wasn't. – Stijn de Witt Apr 26 '15 at 11:57

17 Answers17

264

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/

Oisin Lavery
  • 3,265
  • 2
  • 17
  • 17
  • 1
    +1 The inspector is ideal for this, even allows to set user-agent etc. – GDmac Nov 23 '12 at 12:01
  • If you develop in Firefox then Firebug makes this even easier because you can stack the html and css sub panels vertically. This is a serious bonus when working on responsive designs where you are constantly testing at different resolutions. – Oisin Lavery Feb 03 '13 at 12:55
  • 2
    You are the man. And it's even simpler to debug the small screen, when there is an appropriate big inspector-window. – aebersold Mar 14 '13 at 15:30
  • 1
    Thanks @aebersold Yep it's a nice bonus getting a nice big Inspector window when working on Mobile layouts. – Oisin Lavery Mar 19 '13 at 09:33
  • 3
    IMO this should be the accepted answer. The idea is simple and brilliant, and your hint above the metrics override is awesome. And so is the bookmarklet you linked to! – marlar Sep 26 '13 at 11:06
  • 1
    I did not know that the Chrome developer tools could override device metrics and user agent... that's huge. Stacks of thanks (and upvote) for sharing! – fusion27 Nov 08 '13 at 22:12
  • 5
    Anyone else couldn't figure out how to dock the developer tools to right? http://stackoverflow.com/questions/10023640/how-to-reposition-chrome-developer-tools – Erti-Chris Eelmaa Jan 30 '14 at 22:17
  • 1
    *Tip:* Open the same page in multiple tabs, resized for each of your most important target screen sizes. – Simon_Weaver Apr 12 '14 at 02:45
  • 1
    The Emulation is the perfect answer, finally I can get rid of the user agent switcher. Thanks! – andreszs Sep 12 '14 at 16:39
36

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.

Chamika Sandamal
  • 22,027
  • 5
  • 58
  • 81
  • Any addon/extension which, from the chrome, caused the viewport to scroll should be removed and shunned posthaste. `:p` Note, the few I have in Firefox do nothing of the sort (weather, Firebug, Xmarks). – Jared Farrish Dec 30 '11 at 18:41
  • 4
    **when there are addons, browser only resize to the address bar size and keeps the addons visible.** hope you understand this. this is not a side effect of addons. but when there are addons installed browser cannot resize to the minimum value. because of the addon icons next to the address bar. – Chamika Sandamal Dec 30 '11 at 18:58
  • So where does the horizontal scroll bar come from? Maybe some addons may try to prevent the chrome width from resizing below a certain width, but I haven't actually seen this in practice (although it could, I suppose). That doesn't explain the "horizontal scrollbar" though, which suggests the chrome is shrinking, but the page content is wider than `400px`. – Jared Farrish Dec 30 '11 at 19:03
  • I've seen something similar in Firefox when accessing a URL via SSL. Firefox won't shrink as far because it ensures the domain name is visible. – Nathan Jul 11 '12 at 22:16
  • 2
    Removing all addon icons in Chrome did not solve this for me. nayan9's solution did. – Andrew Shooner Oct 31 '12 at 13:20
  • @AndrewShooner: it is not working to you is does not mean that you have to down vote. it is the answer for the question. may be you are having another issue. – Chamika Sandamal Nov 01 '12 at 06:37
  • for me, a quick fix was to go Incognito, which has faaaaaar fewer extension icons and allows for a more slender window – somewhatsapient Feb 20 '13 at 21:52
  • @somewhatsapient: And also now you can use chrome as different user – Chamika Sandamal Feb 21 '13 at 04:44
  • 31
    **This is not the answer**. Even with all addons/extensions disabled, Chrome's minimum width is still 400px. – Oisin Lavery May 25 '13 at 20:21
  • @Sherpanaut: How can you say that, *This is not the answer*? it may not helpful for you. but this is already accepted. that means it worked for the OP. So you can say this is not the best solution. but dont say this not an answer – Chamika Sandamal May 26 '13 at 08:27
  • 4
    @ChamikaSandamal it is not correct.The OP is trying to scale his window below 400px. This is impossible in Chrome because the browser has a hard min-width of 400px. The only way to achieve the effect the OP is looking for is Sherpanaut's answer. Your answer does absolutely nothing beyond helping the user get closer to the hard min-width of 400px, which is not what the OP was looking for. – Fred Stevens-Smith Jun 29 '13 at 21:08
  • @FredStevens-Smith: My minimum size with the way i posted is 239px. i dont know why you say it is not working and you are saying op asking about something else, but hope you can see that he already accepted this answer – Chamika Sandamal Jul 14 '13 at 10:31
  • 2
    @ChamikaSandamal while it may work for you, it's not working for the rest of us. It's nothing against you. It's simply that this answer is does not fix the problem for a lot of us. – DA. Oct 30 '13 at 03:49
  • @DA, Not agree with the word **rest of us** since it is already accepted and it still has 14 upvotes. That means i'm not the only one who got a solution with this answer(minimum 15 people including me and OP). BTW, i'm not worrying about the down votes since it may not the answer if someone doesn't follow the steps. If you do it correctly your browser width will be less that 230px. and of course this may not be the solution foe OS X. But if you read the question carefully, he doesn't mention OS X here. – Chamika Sandamal Oct 30 '13 at 07:07
  • 1
    @ChamikaSandamal the rest of us = all of us that are pointing out that it doesn't work for them. I'm sorry that the upvotes you received doesn't change that reality for us. – DA. Oct 30 '13 at 07:28
  • @DA., So You are using OS X? – Chamika Sandamal Oct 30 '13 at 07:31
  • 1
    @ChamikaSandamal yep. I assume the OP was as well. Hence the problem. – DA. Oct 30 '13 at 07:33
  • @DA. Can you see anywhere it is mentioned in the Question? Dont say this is not working based on your assumption. If Op also using OS X and he will mention it, and remember his problem is solved with this answer. So Chrome doesn't scale bello 400px in OS X is different question. And this is not the answer for that question. – Chamika Sandamal Oct 30 '13 at 07:42
24

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.

nayan9
  • 241
  • 2
  • 5
21

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.

drinkdecaf
  • 385
  • 2
  • 12
  • This is the answer that worked for me. Useful for having Tweetdeck sized as small as possible. – Krug Aug 18 '16 at 21:31
11

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):

Chrome Emulation icon

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:

enter image description here

gl03
  • 967
  • 9
  • 14
  • Most impressive, I didn't know about that feature... finally I can get rid of the user-agent switcher and properly emulate mobile devices, thank you!! +10 to this – andreszs Sep 12 '14 at 16:38
  • This feature replaced by "Toggle Device Toolbar" https://stackoverflow.com/a/44194243/1175496 – The Red Pea May 13 '19 at 13:32
8

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');})();
nils
  • 318
  • 4
  • 11
4

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);})()
Rob Boerman
  • 1,879
  • 12
  • 20
3

The DevTools in Chrome have moved on substantially from when most of these answers were posted. The best way to address this issue now is to use the emulators that are built into Chrome.

To use the emulators open DevTools (press F12) and then click on the following icon to toggle the Device Toolbar:

The devtools button

This will then allow you to emulate whichever mobile device or viewport size you want to.

Mike Poole
  • 1,582
  • 3
  • 21
  • 36
2

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

Tamer Güner
  • 31
  • 2
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

Aniket Sengar
  • 11
  • 1
1

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.

Dan Freeman
  • 11
  • 1
0

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

number5
  • 93
  • 1
  • 2
  • 9
0

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/

Christos Hrousis
  • 628
  • 4
  • 15
0

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 ...

Markus
  • 2,944
  • 6
  • 30
  • 46
0

This is my first contribution to the Stack Overflow community, and it is my effort to give back to all you wonderful people who have made internet such a powerful tool.
Now to answer:
Safari, has this cool feature. You need to activate safari developer option in preferences. Screenshot of setting up preferences in Safari to activate developer menu

Once activated you can access bunch of very powerful developer tools. One of this tool is Viewport adjustment which can used to test your website responsive layout. To activate responsive lay out testing, one can use the shortcut Command+Ctrl+R to activate safari view port adjustment option. This will give you enough control to test your website on various view port sizes.

Screen shot of how your browser window will look once responsive layout test option is activated.

  1. Link to how to activate developer menu in safari: https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/
Xbox One
  • 138
  • 11
Dr.Gaurav Gupta
  • 11
  • 2
0

For a web developer, in order to test the responsiveness of their website in mobile or tablet whose size is less than 500px or minimum width then use developer tools to test in small screens. For testing, go to developer tools and press ctrl+shift+M or click the device icon at the top left of the developer tools screen to toggle device mode. If the device icon is in blue colour, then you can test your website responsiveness by changing the browser window.

Dharman
  • 21,838
  • 18
  • 57
  • 107
Vineeth Peddi
  • 21
  • 2
-4

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.

user372719
  • 176
  • 3