98

Is there any way for the browser to test my websites in resolutions that are higher than my screens?

E.g: I have a 1440 x 900 screen, and I want to test the website in 1920 x 1200, 1920 x 1080, etc.

Martin Tournoij
  • 26,737
  • 24
  • 105
  • 146
HappyDeveloper
  • 12,480
  • 22
  • 82
  • 117
  • @deceze actually it's a very good suggestion. The whole point of things like 960.gs emerging is because if you work with pixel sizes, your design looks the same everywhere, it just takes up different amounts of screen real estate based on the resolution of the screen. There is no need to test horizontally repeating graphics in high resolution as long as you can see a full 2 and a bit repetitions to ensure any seams line up. Or you can just use the cicada principle to produce something more interesting. – Endophage Jun 19 '11 at 06:12
  • 1
    @Endophage: I disagree. Building properly fluid layouts often gives better results with regards to e.g. user font size preferences. Looking the same everywhere is not essential, it's just pixel-peeping. – You Jun 21 '11 at 01:13
  • @You I have yet to see a fluid layout that changes font size. Note the reason that fixed pixel widths are good is because the human eye struggles to scan lines over a certain length (I believe it's been found to be about 20 words at around 12px font size, you can look it up yourself). If you're talking about going down to phone resolutions that's a different story but if you're talking about desktop/laptop resolutions, if I just have a big ass screen with a high resolution and resize the window, I'm effectively testing for different resolutions. – Endophage Jun 21 '11 at 06:31
  • 1
    @Endophage: Hence the need to use `40em` (or a similar measurement), not `960px`, as your width. Pixels won't scale when I decide your 12px font size is too small for me and press `Cmd`-`+`. Besides, my browser window is barely 960px as it is. – You Jun 21 '11 at 10:10
  • @You actually, pixels will scale when you hit `Ctrl/Cmd +` because it's a zoom function. You can try it right here on SO. THe main content section is 960px wide. Using something like 40em won't scale with the screen resolution. Using `em` sizes are relative to the font size of the parent element which is inherited all the way up to 1em/16px at the top level unless overridden (and apologies, it should have been 12pt not px in my earlier comment). Read up: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ – Endophage Jun 21 '11 at 15:12
  • @Endophage: I can make up best practices as well (or let someone else do it). Anyway, I see I was mistaken regarding zooming. However, what `em`-based widths *will* do is scale with the text size set in the *User stylesheet*, meaning that if I have an incredibly large screen and set my base font size to 24px, or have a small screen and set it to 12px, the whole layout will scale with it. This *won't* happen with a px-based fixed-width layout. – You Jun 21 '11 at 18:13
  • @You Best practices come about because lots of people decide there's a good way to do things. I'm not one of the people that decided 960px was a good page width, but I don't disagree with it. There's nothing stopping you using em for font sizes within that width. Width of the page and font size are 2 different problems, you're just making it more difficult for yourself by linking them. You can have the best of both worlds, a 960px wide layout and em font sizes. Stop making out they're one and the same. – Endophage Jun 21 '11 at 18:33
  • @Endophage: But best practices aren't best practices just because some random blog tells you they are. And if I want to have both `em` font sizes *and* follow the ~20 words per line theory, I *cannot* use a pixel based width; it doesn't scale properly. These problems *are* linked, because line length *matters*. – You Jun 21 '11 at 18:48
  • @You the ~20 words per line is an upper limit... you can have LESS. If you want to continue saying 960px is some random best practice I've made up, go complain to the SO devs because they clearly agree with me as they're using it themselves. In fact they are doing exactly what I said, 960px width with %/em font sizes within. You can continue being contradictory but I'm done here. Last word is yours if you want it, I've wasted enough of my time. – Endophage Jun 21 '11 at 18:53
  • @Endophage: No, it's an [ideal length](http://www.maxdesign.com.au/articles/em/). Really narrow columns (two or three words) are just as unreadable as really wide ones. – You Jun 21 '11 at 19:05
  • I've removed the discussions about this question being closed or reopening it. By today's standards the question should remain closed, because we don't do *tool recommendations* here. The answers here are already mostly an ageing list of random websites; precisely what we do not want. – deceze Apr 19 '17 at 11:11

7 Answers7

79

[Edit: Check your browser's devtools first! As @SkylarIttner points out in the comments, tools for responsive design testing have been rolled out since in most browsers since the below solution was posted. They are likely the best/easiest option now.]

You could, correct me if I'm wrong, simply create an iframe with style="desired width & height" and src="your/test.site" as the only child of <body>. Should display the site as if the resolution was the specified width/height and result in scroll bars to examine it.

Not as convenient as using a third party, having to set it up yourself, but has the advantage of being able to test locally with no internet connection.

Cody Crumrine
  • 1,461
  • 1
  • 14
  • 19
30

This solution is way faster than the ones proposed above:

http://www.infobyip.com/testwebsiteresolution.php

It's not as versatile as browsershots.org but it's much faster (a few seconds v. a 45 minute queue).

Kyle Cureau
  • 19,028
  • 23
  • 75
  • 104
  • This is not a bad answer. However, that site provides absolutely nothing you can't already do yourself by simply resizing the browser window on any desktop computer. IMHO, the links on that page for tablets & phones are totally worthless... because on a little iPod screen, my 1000 pixel wide site gets _automatically resized_ by Mobile Safari to display perfectly fine. – Sparky Feb 28 '12 at 03:18
  • 4
    @Sparky672, I personally can't resize my browser to be larger than my screen resolution. The OP was asking to see 1920 on a 1440. Maybe there's a way, but is it as easy as infobyip's solution? Apologies if I'm overlooking something obvious (I feel like I might be). – Kyle Cureau Feb 28 '12 at 05:49
  • Sorry, my screen is already 1920 wide. Like I said, not a bad answer. – Sparky Feb 28 '12 at 06:18
  • 2
    Thanks @Sparky672 and no problem. But shouldn't you delete your comment "that site provides absolutely nothing you can't already do yourself by simply resizing the browser window on any desktop computer" since that's not true? – Kyle Cureau Feb 29 '12 at 21:49
  • I'll stand by that comment since it's technically correct, albeit limited. _(I just pushed by browser window off the left edge and then expanded it to 4000 pixels which is more than double my LCD width of 1920)_. Like I said once already, it's not a bad answer. And since this is not the place for debate, I'll leave it at that. – Sparky Feb 29 '12 at 23:55
  • 1
    @Sparky672, what about vertical? – Kyle Cureau Mar 01 '12 at 00:17
  • What about it? Typically one just scrolls up & down a page. Like I said, comments are not the place for this kind of discussion. You did not get down-voted and I'm not the OP, so I'm not sure why you've latched onto this so hard. – Sparky Mar 01 '12 at 00:23
  • 1
    I use vertical to see what falls above and below the fold. I combine it with StatsCounter and MouseFlow to see what percentage of the audience sees what. I love you Sparky! I think you're reading my tone wrong. And I wanted to be helpful. No one will look into the solution I provide with 0 votes and a list of comments. But oh well... – Kyle Cureau Mar 01 '12 at 00:28
  • Don't be so sure about that. People here mostly judge answers on their own merits. When they're unfairly down-voted, somebody comes along and up-votes it. Comments are almost negligible in that regard. I would suggest whatever concerns you have about how comments influence voting can be asked over on the meta site. It's more like an open discussion of these sorts of things. – Sparky Mar 01 '12 at 01:37
9

Some ideas:

Use browser zoom, 1024x768 50% zoom = 2048x1536 simulated resolution, I know Chrome resizes images and the like. Things become hard to read, but I'm assuming you're testing placement and such.

Also you can use some screenshot programs to take higher than normal resolution screenshots (fireshot on Firefox let me do this, but had memory issues with really high resolutions, and isn't free anymore).

StrangeWill
  • 2,106
  • 1
  • 23
  • 36
6

One solution, perhaps overkill, would be to use Xvfb: set the desired resolution and color depth, load your page in browser(s) and take screenshot(s).

Eugen Constantin Dinca
  • 8,994
  • 2
  • 34
  • 51
2

Although this won't tell you the exact resolution your testing, you can use the zoom tool in Chrome or FF to zoom out. This will give a fairly accurate idea of what the site looks like on higher res screens.

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
1

You may want to try wkhtmltoimage, which can take screenshots at arbitrary resolutions.

Also, in KDE4 it is possible to enlarge a window beyond the screen size. I think I have seen it in Windows 7 too. Not sure about other OSes.

user123444555621
  • 148,182
  • 27
  • 114
  • 126
1

IE9 allows you to resize the browser window to an arbitrary size: Press F12 for developer tools, go to Tools | Resize and pick your preferred size. Then use some tool that can capture off-screen windows if the window is bigger than your screen. This article seems to indicate that Snagit can do this. Then just take a look at the captured pic.

Jaco Briers
  • 1,703
  • 1
  • 21
  • 34