How to simulate a higher resolution screen?

html css resolution
HappyDeveloper picture HappyDeveloper · Jun 19, 2011 · Viewed 57.4k times · Source

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.

Answer

Cody Crumrine picture Cody Crumrine · Dec 18, 2012

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

Related questions

HTML/CSS: What should I use to define image height/width to make it resolution independent?

I've read all over the Internet that I should not define fonts (or anything) with absolute pixel height/width/size and instead, use EM ... so that on higher resolution displays, my web site can scale appropriately. However, what do I …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More