Browser Information Detector

Return to the JavaScript Demos Page

JavaScript is used to detect and display information about the browser being used to read this page. As you will see in the notes, one main message here is to avoid using most of the information detected via the navigator object, as it can be incorrect or misleading.

Screen information (from the properties of window.screen), however, is more reliable.


Notes

  1. Do not rely on these values to be correct! For example, some browsers may spoof values and may not actually be the browser they indicate they are. Even if a value is technically correct, it may not be useful. Some browsers (Chrome, Firefox, and Safari, for example) simply return "Netscape" for navigator.appName. If you want to determine if a browser can support some feature, don't use these values for browser sniffing. It is much better instead to directly detect whether the feature is supported or not, such as by using Modernizr. It's more work to code things this way, but it is reliable, unlike browser sniffing. If you are determined to use values from the navigator object, then parse the value of navigator.userAgent to find the item you are looking for.
  2. This property is not a web standard but is supported by various browsers.
  3. The value displayed for navigator.platform may not be accurate and thus should not be relied on. For Mozilla Firefox, for example, the general.platform.override value may be displayed instead of the actual navigator.platform value unless the JavaScript code is privileged to access navigator.platform. Even when technically correct, the value may be misleading, as "platform" doesn't necessarily mean "operating system". For example, if you are running a 32-bit browser application on a 64-bit OS (like 32-bit Firefox on 64-bit Windows 7), the "platform" value will indicate 32-bit Windows.
  4. navigator.appVersion is not very useful in many instances. For example, for most if not all versions of Firefox, it shows version 5.0. Parsing the value of navigator.userAgent for the information it contains is a better way to look for version numbers.
  5. navigator.userAgent contains the information the browser sends to the server. This value tends be more useful that most of the other navigator properties, but be aware that is, too, is not reliable. For example, a number of browsers allow the users to set the value, so you cannot be certain the user actually has the browser the value claims it to be. Still, in some cases, parsing it for information can be better than nothing.
  6. navigator.cookieEnabled returns true if cookies are enabled on the browser and false if they are not. However, some browsers may not support the property but still support cookies: in this case a value of false could indicate only that navigator.cookieEnabled does not exist. So, when a false value is obtained, a more robust way to check if cookies are enabled is to then try to write a test cookie and then check if was written. If you detect the cookie, then cookies are enabled.
  7. navigator.onLine sounds like it would be a great way to detect if the browser is online or not (to determine, for example, whether to save data to a server or locally), but it is problematic. Also, some versions of some browser have poor or broken support for this property.
  8. screen.width and screen.height are the screen resolution, the total screen width in pixels and the total screen height in pixels. screen.availWidth and screen.availHeight are the width and height minus the pixels taken up by UI elements. For all four properties, these values are the maximum possible they can be; see Note 10 for obtain the values the browser's window is actually set to.
  9. colorDepth and pixelDepth return the same value, the number of (color) bits per pixel. Use colorDepth if you need to support Internet Explorer v. 8 or less, as these versions don't support pixelDepth.
  10. window.outerWidth and window.outerHeight return the width and height in pixels of the browser window, including all UI elements like scrollbars and toolbars. window.innerWidth and window.innerHeight return the width and height in pixels of the content area of the browser window, which excludes UI elements like scrollbars and toolbars. Internet Explorer v. 8 and earlier versions do not support these four properties, but various workarounds like using document.documentElement.clientWidth or document.body.clientWidth can be used for these browsers.
    Other window properties relating to the window and screen are: window.screenLeft/window.screenX (the X coordinate of the browser window relative to the screen; browsers differ whether they support screenLeft or screenX); window.screenTop/window.screenY (the Y coordinate of the browser window relative to the screen; browsers differ whether they support screenTop or screenY); window.pageXOffset (the number of pixels the current document has been horizontally scrolled from the left side of the window); window.pageYOffset (the number of pixels the current document has been vertically scrolled from the top of the window).


Return to the JavaScript Demos Page