Customise visual design for mobile devices

[tomstuart]

The font sizes and page proportions don’t look good on a mobile device (e.g. my iPhone). It would be nice to use media queries to make things look better for mobile browsers.

[mudge]

An easy fix for this is to add the following to the layout head and tweak the h1 font size a little:

    <meta name="viewport" content="width=device-width, initial-scale=1">

The only issue is the cellular automaton's fixed width. I tried moving its dimensions into the stylesheet (a width of 100% and a height of 50%) but it no longer renders correctly. I switched from using this.canvas.width and this.canvas.height to this.canvas.offsetWidth and this.canvas.offsetHeight (see http://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height) but the cell sizes were still all wrong. One to investigate further, I think.

[tomstuart]

All I know is that the <canvas> width and height attributes control the dimensions of the underlying bitmap, which is unaffected by anything you can do in CSS — the latter just controls how the bitmap is scaled for display. (This now makes me realise that it’s silly have a cellSize in the JavaScript: we should just do 1 cell = 1 pixel, and then scale up in CSS if we want a chunkier display.)

[mudge]

Is this still the case?