Back on the perennial problem. Thought I had the solution. Re-did the Portrait background image. Much happier with the latest version. It keeps the whole of the abacus in the background, much more balanced. However, for some reason, the information that is supposed to overlay on top of the image is now appearing below the image. need to resolve this, but the problem is, everything looks correctly configured.
Interesting Landscape/Portrait dilemma which I have now resolved. The problem I was encountering was getting both style and Javascript parameters set-up correctly. I had been using the @media css mechanism for selecting the styles, and the ‘window.matchMedia’ events to set the Javascript/non-style attributes. Problem was I could not guarantee that these would in sync. Indeed they generally were not. I have now reverted to a single mechanism – that of ‘window.matchMedia’ (It has to be that route, because from JavaScript you can set styles. You cannot set non-style elements/attributes from css.)
The effect is now almost perfect. Image and left and right text margins vary depending on orientation. The only slight issue revolves around text height on the iPad / iPhone in landscape mode. Text is relatively too large and text writes off the bottom of the image. The effect is fine on PC (at least with reasonable landscape ratios). Somehow I need to adjust text point size for screen width. I need 128 chars in 60% of screen width in Landscape mode.
However what all the above goes to prove is that I cannot use this style of screen for general web pages. For fixed/known content pages, it is possible to manually construct the page. However it is completely disregarding the flow nature of the content. To retain that, I have to go down a more traditional route page construct. Which means to make them interesting I need to include graphical content, and a bit of ‘style’
On Width and Text size. There are, in addition to the traditional size measurements of:
- px -Pixels
- pt – Points
- in – inches
- cm – centimeters
- mm – millimetres
- pc – picas
- em – One current font size
- ex – width of lower case ‘x’
- % – % of em
We now also have:
- vw – Viewport width
- vh – Viewport height
- vmin – Smaller of Viewport width and height
- vmax – Larger of Viewport width and height
The re-factoring that I undertook as part of rationalising the javascript and styles meant that I could easily move the Quintic font styles into Landscape and Portrait specific css style sheets. Then it was only a case of determining the best ‘vh’Â settings for the orientations.
Pleased to say  I now have exactly what I want, on PC, iPad, & iPhone. OK the text is small on the iPhone, but then it always is.