CODEWITHSUNDEEP
htmlcss
Brandon
Brandon

Reputation: 309

Would like some clarification on screen resolution and screen size

I use: http://quirktools.com/screenfly/ when viewing my web pages at different resolutions. I noticed when selecting the display icon which is the very first icon top left hand corner (It looks like a computer monitor), I see a drop down menu with various resolution dimensions and next to those dimensions are inches. For example, on that list, 1920 X 2000 has "24 inches next to it. Does this mean that a 24 inch monitor will typically by default have a resolution of 1920 X 2000? or is that just a demonstration of a monitor that is 24 inches and is displaying content with a resolution of 1920 X 2000? Or can you assume that most likely a 24 inch monitor will display content with a resolution f 1920 X 2000 by default?

Upvotes: 0

Views: 182

Answers (1)

Grant Gibson
Grant Gibson

Reputation: 813

The screen 'sizes' quoted on Screenfly are indicative only - it's only the pixel dimensions that it is simulating. The relationships between screen and pixel size listed on Screenfly are fairly typical, but they're not universally true.

There are two main elements at play:

  1. Pixel density: A typical desktop screen will have a pixel density of around 96dpi (dots per inch) while a notebook may have a pixel density of around 116dpi. Most screens display images at a pixel ratio of 1 (i.e. one pixel in the image = one pixel on screen), therefore an image that is 640x480 pixels could be around 20% smaller viewed on a typical notebook than on a desktop since the pixels are closer together.
  2. Aspect ratio: Different screens have different aspect ratios. An iPad has a 4:3 (1980s TV-shaped) screen while a modern desktop or notebook will have a 16:9 or 16:10 wide screen. There are no fixed rules, but 16:9 screens are typically better for gaming and movies (since they match the shape of a widescreen TV) while a 16:10 screen is usually better for desktop applications, since the extra height allows for horizontal menu bars.

For example in the Screenfly menu they list 23" as 1920x1080 (a 16:9 ratio) and 24" as 1920x1200 (a 16:10 ratio) but there is no rule to say that's always the case - e.g. my two 24" desktop screens are both 16:9.

Where it all gets interesting is with ultra-high DPI devices like the 'retina' iPad which have pixel densities of around 260-320dpi. If Apple had stuck to convention and displayed content at its actual pixel size everything would've been tiny, including the text.

So, they simply doubled everything - an image that is 300x200 will be occupy 600x400 pixels on a Retina iPad, unless you tell it otherwise (e.g. through @2x assets in apps or min-device-pixel-ratio directives in web sites).

Back to the heart of your question: There's no fixed relationship between screen size and pixel dimensions, but in practice that doesn't matter much -- unless you want to do something like show a matchbox car at "actual size" on a web page, in which case there are third party services available that already have databases of hundreds of monitors and their DPI.

Hope that helps.

Upvotes: 1

Related Questions