Sometimes you want to test the web page you’re developing on your small 1440×900 laptop monitor for, say, 1080p screens. There are several Chrome extensions for that (I tried Window Resizer and Resolution Test), but they don’t really seem to let you test for resolutions higher than that of your screen.
What I want is just a view of my web page with scrollbars to pan around, and nothing else.
Turns out it’s very simple to achieve that result, but either my Google-fu is getting worse, or it’s not that immediate to find out how to do it on the web.
You just need to create an HTML page that contains an
iframe of the correct size that displays your page. That’s it!
Here’s an example page (I saved it as
high_res_viewer.html) on pastebin:
And here’s the code. WordPress strips off the
iframe code even if it’s within
<pre></pre> tags… meh. If anybody knows how to embed iframe code within WordPress posts please let us know in the comments.
To display it here I had to replace the first
iframe tag with a bogus
i_frame tag. You need to change it back to
iframe of course to make it work.
<html> <body style="margin:0px;"> <i_frame src="file://localhost/Users/myuser/web/my_page.html" style="border:0px #FFFFFF none;" name="myiFrame" scrolling="auto" frameborder="0" marginheight="0px" marginwidth="0px" height="1080px" width="1920px"></iframe> </body> </html>
So you need to set the correct path to your HTML page in
src, and the resolution you want to test in
(The source for the
iframe courtesy of the Online iFrame generator)
You can then use that page to develop for 1080p screens. You could create a page for each resolution you want to test (maybe with names like
1920x1200.html and so on). I’m sure you could also generate the iframe dynamically, providing input fields to set the resolution you want and the link to the page under test, but I just needed a quick solution for the time being.
As always, feel free to correct or improve the post in the comments!