L'application Android (Embedded WebView) se bloque lorsque vous forcez l'orientation du paysage

Question

J'ai une application HTML5, dont la quasi-totalité se déroule dans Canvas. Dans le JS, j'ai défini des dimensions exactes pour la hauteur et la largeur de la toile. J'ai aussi utilisé beaucoup de positionnement absolu avec des nombres magiques pour rendre la mise en page parfaite. Note: tout est conçu autour de l'orientation paysage et le portrait n'est pas une option. Dans les versions modernes de Chrome, tout fonctionne parfaitement: lorsque la page est chargée, la taille de la toile est correcte (quelle que soit la taille de la fenêtre), et les positions des éléments de dessin/position HTML sont alignées en conséquence.

Mais maintenant j'essaye d'accomplir la même chose avec une application Android - une application très simple qui charge juste un WebView, sans rien en contenir. La toile est beaucoup plus petite que la résolution du téléphone, donc j'imagine que ça devrait marcher.

Mon problème spécifique est que la mise en android: screenOrientation = « paysage » dans le fichier Manifest fait toujours l'accident d'application immédiatement. Je suppose qu'il interagit mal avec mon fichier de mise en page principal, mais je ne peux pas comprendre comment. Je suis en train de tester sur un Samsung Galaxy S6, et la construction de l'application à SDK version 21.

Ce que je veux, c'est le comportement comme je l'obtiens dans un navigateur Chrome de bureau, mais je ne peux pas trouver un moyen qui soit ne parvient pas à afficher l'intégralité du HTML5 Canvas ou bloque l'application immédiatement.

Voici le JS que j'utilise pour positionner le canevas, qui fonctionne (dans le bureau Chrome) - notez que canvas # board est l'élément canvas.

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

// some irrelevant code omitted... 

var XRES = 640; 
var YRES = 280; 
var X_OFF = (window.innerWidth - XRES)/2; 
var Y_OFF = (window.innerHeight - YRES)/2; 

// some irrelevant code omitted... 

$('#board').css('left', X_OFF); 
$('#board').css('top', Y_OFF); 
$('#submitDialog').css('left', X_OFF + 222); 
$('#submitDialog').css('top', Y_OFF + 41); 

Ce centre de la toile dans les deux dimensions quelle que soit la taille totale de la fenêtre, et les centres de la submitDialog (un div qui est finalement utilisé pour présenter des scores élevés).

Ce que je voudrais est un moyen de changer le HTML/JS, ou la configuration du projet Android pour obtenir la même chose. L'idéal est que je puisse faire évoluer le WebView automatiquement pour dire 90% de la taille de l'écran. Des pensées? Mes remerciements d'avance!

Answer 1

J'ai trouvé la réponse. Je n'ai jamais réussi à le faire fonctionner via la propriété Manifeste orientation = paysage, mais en utilisant setRequestedOrientation() en onCreate() fonctionne parfaitement. J'ai également dû définir les dimensions WebView à la taille exacte que JS définit l'élément Canvas.

Il y avait quelques problèmes avec l'échelle et OFFSET, facilement résolus en ajustant les propriétés d'échelle et de la marge de la WebView (encore une fois avec des chiffres magiques, mais je suis sûr que les valeurs pour chaque appareil pourrait être calculée et en onCreate()