Detection
The next step is to recognise a mobile phone (and switch to the sub-site).
Unfortunately a phone browser does not know the physical size of its screen, only its pixel dimensions – and with top smartphones the pixel count is the same as for a PC or tablet. References to this problem are scattered through the internet like chads at a programmer's wedding. There is a script to find how many pixels per inch there are on a browser window - and oddly enough the result WHATEVER the actual pixel count is 96!
However, there is another parameter involved which a browser can divulge, called the pixel ratio; this is the ratio between the 'virtual' pixels used in the browser and the true pixels on the phone's display screen. For computers and tablets this ratio is unity but for phones it can be (currently) over two. From the browser design point of view this makes sense, as any image would be minute on a modern hi-res screen. The true screen pixel width is obtained by multiplying the pixel width by the pixel ratio and SHOULD equate with the device specification.
The 'virtual' pixels are called CCS pixels, and a test for screen size reports in these units. So a value less than say 800 will identify a phone (UNLESS someone changes the rules). Most websites only check for this value but I prefer to add an extra check in that phone browsers HAVE to be redesigned from their PC equivalents as there no room for tabs etc. Conventionally all phone browsers include the word ‘Mobile’ in their name – so a searching for that in the ‘navigator’ object will again identify a phone.
I have written a test page which will expose the parameters - pixel width, pixel ratios, true screen width and navigator data. You can find it here.
The script for this page, the mobile test, and for linking to the mobile site, is listed on the JavaScript page. My method has been sucessfully tested on iPhones (Safari), Android phones (Chrome) and Windows phones (Internet Explorer).
Just to allow for the possibility that a smartphone will be designed which fails the mobile tests I include a large-print button to 'View Mobile Website' on the full site home page.