Pixels - PX

Introduction

The need to support different types of browsing device started quite a while ago

We've seen our approach to supporting these devices change as the device landscape became ever more diverse.

Approaches

Multi site Approach

As the first internet enabled phones appeared we saw developers creating dedicated sites for them e.g. WAP.

Multi width approach

Smart phones and tablets became available and developers responded by building their site to accommodate different (pixel based) widths.

Initially there was a rough correlation between screen sizes, their resolution and viewing distance which meant the fixed width approach based on actual pixels made some sense:

Horizontal scrolling and pinching to zoom was often still necessary to successfully navigate sites on phones that didn't adjust themselves for the width of the phones - not a great user experience.

Where scaling was needed rem was often used to size fonts.

Responsive Approach

We've moved (and effectively been forced) towards providing more sophisticated support as new waves of devices with different screen sizes, resolutions (and viewing distances) became popular.

With the advent of, for example, QHD (2,560 x1,440) mobiles - very high resolution devices with small screens and short viewing distances it becomes clear that the augmented fixed width approach wouldn't work.

Pixel Size / Density and Viewing Distances

We can see in the first table above that pixel sizes decrease as viewing distances decrease.

This is helpful to web site builders in that items like, for example 32x32 icons will be large on a TV (13mm) and small on a mobile phone (6.5mm) - just what we want when you consider the viewing distances.

Sometimes though this 'natural' scaling wasn't enough, on Windows for example if you were running a 30" hi res monitor you have to increase the default font size to make it readable.

With the advent of extremely high resolution phones (and tablets) the scaling problem is much increased - the icon which looked OK on an early iPhone will now look miniscule (1.3mm) on a Samsung S6.

So to address this in terms of layout we need to disproportionately scale up items on these devices.

When is a Pixel not a PX?

To help developers apply this disproportionate scaling mobile browsers don't report the true pixel dimensions of their host's displays.

For example while my HTC One has a pixel width of 1080 it is reported as having a viewport of 360PX.

This underreporting means a responsive website using PX to scale items will be readable on any device at standard viewing distances.

But the site will still be able to recognise that the width of the display is significantly reduced compared to a desktop and constrain the website's width accordingly.

So effectively the PX width or height of a device is:

• A device specific measure
• Not related solely to that device's screen  resolution.
• Computed by taking into account screen size, screen resolution and viewing distance
• Directly related to the field of vision of our eyes rather than a fixed physical length.

This effectively makes PX a measure of what the eye can comfortably see on a given device e.g. the detail of a 16x16PX icon should be clearly visible on any device at it's typical viewing distance.

TODO: Put in a table of typical modern devices and the relative field of view (in degrees) that a icon would take up at native pixel resolution and also at PX and compare PX to retina resolution.

Read More

This W3C article decribes how PX and other absolute measurements are calculated.

https://www.w3.org/TR/css3-values/#absolute-lengths 

Device resolutions:

http://dpi.lv/

PX dimensions:

http://viewportsizes.com/?filter=iphone