ResizeMyBrowser | Hacker News Reader

ResizeMyBrowser

resizemybrowser.com

291 pointsgulbrandr54 comments

On Firefox (and now Chrome apparently) web developer plugin.

http://chrispederick.com/work/web-developer/

  Tools -> Web Developer -> Resize

The neat thing about using the link is that I can send it to non-techs for previewing websites in different resolutions.

Unfortunately less complete, because it resizes the browser window globally (outer size here). With tree-style tabs it doesn't match what many will see.

No, actually the web developer extension allows either the entire window or the portal (page display) dimensions to be specified.

In what browser? For Chrome, it appears to resize the outer window, not the viewport.

Firefox. I guess I never used that feature in Chrome...

I see, now. The Chrome version will report the viewport size but does not appear to offer the ability to set it.

Sorry, I was not entirely right.

The Web Developer extension for Firefox asks for width x height dimensions plus an extra "viewport" checkbox, anywhere you specify the size.

Just an FYI - the Web Developer Toolbar extension for FF and Chrome has this built-in.

Ah, I didn't know this was available for Chrome - thank you!

Nice, but I can't help but think this would be better as a browser extension instead. That way you could use it on your own URL without going back and forth.

A bookmarklet can probably perform this.

For those with Chrome, you can try Resolution Test: https://chrome.google.com/webstore/detail/idhfcdbheobinplaam...

Here is the javascriptlet: javascript:window.resizeTo(400,400)

I was able to crash FF 3.6.17 with javascript:window.resizeTo(999999999,999999999999).

Just something I found interesting.

Very interesting indeed, FF 4.0.1 tried to resize to (0,0), probably because it overflowed.

I do not have a dbg build on this machine but a stack trace may be in order.

Cool utility - one minor change that I would use ... put in an INPUT box, so that I can paste a URL in there ... then when I click on each size, open the tab and point it to that URL, then I can quickly see my site in all of the different sizes.

Well done, quite sexy :) A

If you go to this link in Chrome, you cannot resize the current browser window, so a new window is opened. However you cannot change the URL of this new window to see how your website does with the set resolution. So work needs to be done there.

Just want to nitpick that it's the iPhone 4, not 4G. It may be the fourth generation, but it's not a 4G phone.

It's not even the fourth generation! So: iPhone, iPhone 3G (second generation) + 3GS, iPhone 4 (third generation). I really don't like when people say 4G because it's twice wrong but it's hard to blame those who do it.

Except most people think: iPhone, iPhone 3G, iPhone 3GS, and iPhone 4. There's an argument to be made that the iPhone 4 is the 4th generation of iPhones.

I guess we will find out how this works with the next release which some informed people say it's going to be called 4S...

Can someone also create a "don't you dare resize my browser you darn pesky website" - although this deviant behaviour does seem to be a lot less prevalent than it once was.

For what it's worth, Firefox has a preference to disable that behavior.

On Chrome, the site said my browser doesn't allow changing the current window, so it popped up a new window of that size instead.

Under XMonad, tiling windows won't be resized.

In both awesome and xmonad mine was resized (firefox 4). Although in awesome I see the desktop over where the window used to be, in xmonad the (now inactive) part of the window stays exactly what it looked like before, but just static.

Interesting. It worked differently for me, but then, I was using Chrome.

http://www.simures.com does a lot of the things being requested -- input boxes for resizing, url passed as part of the url for easy access, doesn't resize your actual browser, etc. http://www.simures.com/800x600/news.ycombinator.com is a good example.

My only complaint is that on a dual monitor setup the maximum link centers the window in the middle of the two screens.

Pretty slick either way.

I'm gonna say it is your browsers fault, since my Firefox 4 maximizes it on the screen it was on.

I'm actually using Firefox 4. I should have mentioned that before.

http://www.brianapps.net/sizer/

Although Sizer is more geared towards desktop monitor resolutions than mobile devices. Mobile devices tend to not have much chrome in place. You could use this for mobile but you would have to account for the chrome in settings the sizes.

Much nicer alternative: http://browsersize.com/

If resolution is bigger, makes a new window instead of warning.

It's cool!

One little thing, the iPhone 4 doesnt respond to neither css nor js resolution of 960*640, instead it has the same resolution as the 3GS but with -webkit-device-pixel-ratio: 2

Also try http://browserling.com. You can click the screen icon in the sidebar to change the resolutions.

I've made myself bookmarketlets that do this for iPhone/iPad sizes. IMO, you ought to be able to drag the different screen sizes onto your bookmarks bar.

Doesn't seem to work in Opera, and the attempt to open a new window just opens a new tab (which of course, is the same size as the rest of the tabs).

worked for me (Opera too), it opened up a tab with the size I selected. Check your settings

Note that you will need to turn off dom.disable_window_move_resize in firefox for this to work, otherwise resize does nothing.

Nice try, Meizu marketer. :)

On a serious note, my MacBook Air 13 is 1440 x 900 - not 1280 x 800.

I guess that's the '08 MBA? My 11 is 1366 by 768.

Doesn't work. My window manager manages my windows; they don't self-manage.

heh I miss this ever since web inspector and firebug pretty much replaced the web developers toolbar

good job, thanks

I used to have both, firebug and webdev inspector when I was into html more than I'm now, can't remember any problems with them co-existing.

I have both and they work perfectly well together.

really helpfull for developement for mobiles. I used an iFrame until now. Thanks

Great idea! That is a very simple yet useful tool! Thanks for sharing.

Meizu m8? Seriously?

Relevant: http://browsersize.googlelabs.com/

Simple visual tool to show what percentage of web users can see different areas of your website without needing to scroll.

Simple and pretty laggy for me on chrome - even moving the mouse seems to lag a little.

I'm a bit disappointed, because it renders relative widths according to the current window width, which would be much smaller on smaller screens.

Many of my webpages have something like

width: 80% max-width: 80em

or so for the main text. Which ensures that on a narrow window you still see a decent part of the main text, but on this test site it looks as though you only see the margin with a narrow browser window.

Unfortunately, it's not too useful for websites in right-to-left languages, like Persian, Arabic and Hebrew.

This tool is misleading. It sizes the site according to your CURRENT browser size then lays the semi-transparent graphic over it. This means that if I have a 900px wide content area centered in the viewport, and my current width browser width is 1400px, it appears that there is 250px of empty background on the left and a 380px wide browser would see almost nothing. That's inaccurate.

tl;dr: take this tool with a grain of salt, resizemybrowser is a much better method.

Reply on news.ycombinator.com