如何模拟更高分辨率的屏幕?

有没有办法让浏览器测试我的网站的分辨率高于我的屏幕?

例如: 我有一个1440x900的屏幕,我想在1920x1200,1920x1080等测试网站。

64224 次浏览

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

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.

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.

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.

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

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

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