Screen Resolution - Web development

I have used the statcounter for several years to help me adjust page layouts for web development.

The mistake I have been making is that the browser does not usually have the entire screen resolution available.

Today I took some time checked the window dimensions on a Windows 7 laptop with a 1366x768 screen and several browsers.

Firefox

  • Full screen with menu and bookmark bar 1366x608
  • Windowed, full height x600

Internet Explorer

  • Full screen with menu, bookmark, DebugBar 1301x548
  • Windowed, full height x540

Chrome

  • Full screen 1366x667
  • Windowed, full height x639

These dimensions depend on the toolbars in use, etc, but they provided a very helpful reminder that 1366x768 screen resolution is not the same as a 1366x768 browser page.

In addition, the best way to test a page under Internet Explorer is to use Internet Explorer, and if you you need to test different versions (you do!), you can use IE or IETester (http://www.my-debugbar.com/wiki/IETester/HomePage). Sometimes there is simply no substitute for target machine and browser testing.