Browser Sniffing
Prior to the use of media queries and in a time when browsers varied greatly in how they rendered HTML and CSS, webpages would use JavaScript to detect which browser they were being viewed in. (See the last table at the bottom of this page.) Then depending on the browser, a CSS stylesheet customized for that particular browser would be downloaded. This made web design very tedious, as stylesheets had to be created for each of the major browsers. Cross browser compatibility issues are now mostly a thing of the past, as the major browsers (Chrome, Safari, Firefox, Opera) support enough of the modern web standards to allow for the use of just one common stylesheet. However, this website has elected to use a few features which are either not available in some browsers or are buggy in some browsers. For instance, Firefox is missing support for hover media queries and Edge has a z-index bug. So until the other browsers catch up, this website needs to be viewed in either Chrome, Opera or Safari.
Browser sniffing is still useful in helping to set values for CSS properties based on the dimensions of the browser window and the elements within the browser window. This web page illustrates what information can be derived via the use of JavaScript.
mydevice.io
mydevice.io is a useful website which reports the virtual CSS dimensions (including the CSS pixel ratio and dpi, dppx and dpcm resolutions) for the device and browser in a nice layout. mydevice.io also includes a table of those dimensions for common mobile devices.
Support Details
Support Details was originally built to help provide tech support staff quickly figure out what type of computer and browser a user is using. Browser information can also be helpful to web designers.
Device Display
The screen object contains information about the visitor's screen.
screen.width and screen.height seem to correspond to the virtual CSS pixel count, not the device's physical pixel count.
On an iPad, but not on other devices, screen.availWidth/availHeight seem to be flipped from screen.width/height.
Browser Window
The window object represents an open window in a browser. If a document contain frames (<iframe> tags), the browser creates one window object for the HTML document, and one additional window object for each frame.
The meaning of the values reported in the table below also vary from browser to browser and what mode the browser is operating in (quirks mode). Whether or not scrollbar widths are included may depend on the browser version and vintage.
window.innerWidth and document.body.clientWidth both include the width of the vertical scroll bar.
window.innerWidth does not seem to include the border the operating system places around the browser window, while window.outerWidth does.
On a mobile device without included in the webpage, window.innerWidth will report the full width of the page which can extend beyond the visible browser window, while window.outerWidth will report the width of just the browser window.
Finding well written and up-to-date articles which represent current browser standards is difficult. The following articles are interesting to read, but contain some information which may have been correct at the time they were, but now may have some incorrect information.
Viewport, Device, and Document Size
Window sizes and scrolling
Element size and scrolling
How to use Media Queries in JavaScript with matchMedia
JavaScript to Determine Viewport Size
This Web Page
clientWidth and clientHeight can be used to get the width and height of an element.
Browser Version
The navigator object contains information about the browser itself. See also navigator.
appCodeName (Mozilla), appName (Netscape) and product (Gecko) always seem to give the same answer, regardless of the browser being used.