As Web developers, it is important to know which browser is being used to view your site so that your application can display content in different ways, based on browser type. While the entire feature sets supported in Microsoft Internet Explorer and Netscape Navigator differ, there is a core set of functionality that both browsers support. This means that the client-side scripting code syntax for accessing those functionalities will be nearly identical for both. This 10-minute solution will demonstrate how to use client-side script to detect whether Microsoft Internet Explorer or a Netscape browser is being used to view the page. Further, it will show how to determine client settings such as screen resolution, color depth, and amount of usable space on the user's screen.
Both browsers support the Navigator object and the Screen object. You can use these objects in exactly the same way by detecting various properties of the objects. Although these objects are supported by both browsers, the properties exposed by the objects do differ. In this case, you will use only properties that are supported by both browsers.
Listing 1 contains the HTML that will determine browser type and client settings. This HTML will run equally well in the 4.x versions of both browsers. Notice that the client-side scripting language is JavaScript. Since both browsers support the Document object, you can use it to write text to the browser document for users to see output. The Writeln function makes this possible.
In this solution, you are simply checking the values of various properties to determine the user settings. This page writes those values to the screen but your own application can do things like display a higher or lower resolution image based on the user's display settings. The only difference in the way the two browsers handle things on this page is with the colorDepth property of the screen object. The two browsers assign different values to the different color settings. You can handle this issue easily enough through a series of 'If' statements.
The output from the page will look something like this:
-----------------------------------------------------------------
Browser Name: Microsoft Internet Explorer
Browser Version: 4.0 (compatible; MSIE 4.01; Windows NT)
Total Screen Height: 600
Total Screen Width: 800
Usable Screen Height (screen height - toolbar height): 572
Usable Screen Width: 800
Platform: Win32
Colors: 64k
----------------------------------------------------------------
