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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
55 comments
[ 3.3 ms ] story [ 88.1 ms ] threadgood job, thanks
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.
Simple visual tool to show what percentage of web users can see different areas of your website without needing to scroll.
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.
tl;dr: take this tool with a grain of salt, resizemybrowser is a much better method.
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
If resolution is bigger, makes a new window instead of warning.
Pretty slick either way.
I was able to crash FF 3.6.17 with javascript:window.resizeTo(999999999,999999999999).
Just something I found interesting.
Well done, quite sexy :) A
On a serious note, my MacBook Air 13 is 1440 x 900 - not 1280 x 800.
http://chrispederick.com/work/web-developer/
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.