How to simulate a higher resolution screen?

HtmlCssResolution

Html Problem Overview


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.

Html Solutions


Solution 1 - Html

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

Solution 2 - Html

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

Solution 3 - Html

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

Solution 4 - Html

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

Solution 5 - Html

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.

Solution 6 - Html

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.

Solution 7 - Html

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionHappyDeveloperView Question on Stackoverflow
Solution 1 - HtmlCody CrumrineView Answer on Stackoverflow
Solution 2 - HtmlKyle CureauView Answer on Stackoverflow
Solution 3 - HtmlStrangeWillView Answer on Stackoverflow
Solution 4 - HtmlEugen Constantin DincaView Answer on Stackoverflow
Solution 5 - HtmlJason GennaroView Answer on Stackoverflow
Solution 6 - Htmluser123444555621View Answer on Stackoverflow
Solution 7 - HtmlJaco BriersView Answer on Stackoverflow