HTML5: mise en page absolue centrée fixe élément de taille sur mobile et bureau

Question

Je crée un jeu HTML5, dans un 4: 3 'viewport', dans lequel les éléments sont positionnés absolument (comme je veux utiliser les 'coordonnées mondiales').

Plutôt que d'avoir des dispositions différentes pour différents appareils, je voudrais pouvoir le développer avec une seule mise en page. Je voudrais avoir un seul élément de conteneur 4: 3, centré sur un fond noir.

Sur les grands écrans (table, bureau), je voudrais qu'il atteigne une taille physique maximale (par exemple 20cm par 15cm). Sur les écrans mobiles, je voudrais zoomer pour s'adapter sans débordement à n'importe quelle orientation (ce qui encouragera les gens à basculer vers le paysage).

Est-ce possible? J'ai joué avec le tag viewport, mais je n'ai rien trouvé.

Answer 1

J'ai trouvé ce que je cherche dans l'article Case Study: Auto-Resizing HTML5 Games

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

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

Answer 2

Les éléments positionnés de manière absolue sont positionnés en fonction de X, Y à partir du coin (gauche) connu de la page. Donc, si vous êtes dans une situation où la taille de cette page pourrait changer, votre option pour repositionner ces éléments proportionnellement va entraîner une charge de javascript probable. Vous devrez évaluer la taille de la page, déterminer vos proportions pour les marges et le remplissage de vos éléments absolument positionnés, puis les repositionner au besoin.

Ne voyant pas le code ou une capture d'écran, il est impossible de savoir exactement ce que vous essayez de faire. La grande question à vous poser est pourquoi? Avez-vous vraiment besoin d'un positionnement absolu, ou est-ce simplement un moyen d'éviter les subtilités de la position relative et du modèle de boîte? Ma règle de base personnelle est qu'un élément n'est positionné de manière absolue que s'il doit flotter ou croiser un autre conteneur, et il existe même des alternatives à la plupart de ces situations. Le design réactif est arrivé depuis longtemps, et il est probable qu'avec un mélange de javascript, de css et de requêtes média, vous puissiez atteindre votre objectif.