Post a Comment On: Developer Tip of the Day

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.

[Image]The built-in IE developer tool should now open, as illustrated below.
[Image]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.
[Image]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+.