Search code examples
csshtmlviewportmobile-website

HTML5: Centered absolute layout fixed size element across mobile and desktop

I am creating an HTML5 game, in a 4:3 'viewport', in which elements are positioned absolutely (as I want to use 'world coordinates').

Rather than having different layouts for different devices I would like to be able to develop it with a single layout. I would like to have a single 4:3 container element, centred on a black background.

On large screens (table, desktop) I would like it to hit a maximum physical size (e.g. 20cm by 15cm). On mobile screens, I would like it to zoom-to-fit with no overflow at any orientation (which will encourage people to flip to landscape).

Is this possible? I've been messing around with the viewport tag, but getting nowhere.

Solution

  • I have found what I'm looking for in the article Case Study: Auto-Resizing HTML5 Games

     and here's what I made, based on that:

    https://jsfiddle.net/mcintyre321/hkLLqzr1/