Determine Your Device Display Pixel Count for Width & Height

WebsiteDimensions.com - RF CafeWebsite design has unarguably become a major source of headache for designers because of the widely varying non-standard standards for both desktop and mobile device displays. Compound that with the massive amount of information which needs to be fitted into the available space and the task is daunting. RF Cafe screen space has been necessarily (some say annoyingly) crammed with content. Some of the "clutter" has been necessitated by the need to make a living (i.e., advertising), but the majority is driven by a desire to provide as much data as possible without the need to endlessly scroll up and down pages and, most importantly, not having to click all around the website to find what you're looking for.

One thing I implemented a long time ago was a unique (my original idea) menu system that avoids an HTML file that contains hundreds of lines of drop-down menu code, on top of the actual web page content. I use multiple separate, categorized, selectable pages in an iFrame (inline frame). It is fast, compact, and never causes obnoxious behavior like menus that refuse to open or close or that obscure underlying content on the page.

PixelGrid (webitedimensions.com) - RF CafeBut, I digress... In an effort to produce a "mobile" option for RF Cafe, I began researching mobile device screen sizes. As expected, there is no standard, so it is up to the web page designer to either pick a screen size and work with it, or try to be all things to all devices and use complex JavaScript code to detect the device resolution and format the page dynamically, accordingly. In the process of learning about iPhone and other smartphone pixel counts, I ran across a handy-dandy website that generates a horizontal and vertical grid (left) to allow you to easily determine the pixel width and height, respectively, of your device display. It can also be used to manually adjust the size of your browser to match various device resolutions to see what your web page will look like within the space.

WebsiteDimensions.com also provides some useful info on common screen sizes for various generations of desktops, tablets, and smartphones based on statistics gathered at the W3C website.

This page on Wikipedia has a very extensive list of display sizes on a per manufacturer basis.

Posted  January 27, 2014