Monday, December 20, 2010

Website screen resolution test in Internet Explorer

It's easy to simulate various screen resolutions (screen sizes) in Internet Explorer using the built in developer tool (built in since IE7). Allowing you to test your webpages in various screen sizes.

Simply go to the menu item as illustrated below or press the keyboard shortcut F12 to load the developer tool.


To open the developer tool in Internet Explorer 8; click the cog icon in the top right hand size, then click 'developer tool'

The built-in IE developer tool should now open, as illustrated below.

With the developer tool now open; in the menu click "Tools" > "Resize" and select the screen resolution of your choice. By default you can simulate, 800x600, 1024x768, 1280x768 and 1280x1024, which covers the most popular resolutions. However you can also provide your own custom resolutions.

Once the developer tools are open, click

Notably, this is only a simulation of screen resolutions. It does not show you exactly what a person using these screen resolutions will see. It will only change the height/width of your browser window and will not effect font sizes etc etc. But it is far faster than changing your own monitor resolution each time you wish to test.

The resolution simulation is therefore very useful for testing CSS layouts, but perhaps not as useful if your testing for accessibility compliance etc. You could use this technique for day-to-day testing, coupled with actually changing your monitor resolution (more time consuming) for more in-depth testing.

This tip has been written for Internet Explorer 8 under Vista, but it should be very similar for IE7+ under XP+.

3 comments:

alexander michael said...
This comment has been removed by a blog administrator.
shawn allan said...

This is a great inspiring article.I am pretty much pleased with your good work.You put really very helpful information. Keep it up. Keep blogging. Looking to reading your next post.

accounting and bookkeeping services

Ryan Reynold said...

I loved your blog post.Thanks Again. Great.

Web Design Company