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 [source][/source] or <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 height and width.
(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 1080p.html, 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!
something I did not know 