Android App (eingebettete WebView) stürzt ab, wenn Landschaft Orientierung gezwungen

Question

Ich habe eine HTML5-App, von denen fast alle in Canvas stattfindet. Im JS habe ich genaue Maße für die Höhe und Breite der Leinwand festgelegt. Ich habe auch eine Menge absoluter Positionierung mit magischen Zahlen verwendet, um das Layout perfekt zu machen. Hinweis: Alles ist auf Querformat ausgerichtet und Hochformat ist keine Option.

Das läuft in modernen Versionen von Chrome, alles funktioniert prima - Chrome scheint die Leinwand richtig zu skalieren, wenn die Seite geladen wird (unabhängig von der Größe des Darstellungsbereichs) und die Position der absolut positionierten Leinwandzeichnung/HTML-Elemente entsprechend skaliert.

Aber jetzt versuche ich das Gleiche mit einer Android-App zu erreichen - sehr einfache App, die nur lädt WebView, ohne etwas zu enthalten. Die Leinwand ist viel kleiner als die Auflösung des Telefons, also würde ich mir vorstellen, dass das funktionieren sollte.

Mein spezifisches Problem ist, dass Einstellung android: screenOrientation = "Landschaft" in der Manifest-Datei sofort den App Absturz immer macht. Meine Vermutung ist, dass es schlecht mit meiner Hauptlayoutdatei interagiert, aber ich kann nicht herausfinden, wie. Ich teste auf einem Samsung Galaxy S6 und baue die App auf SDK Version 21.

Was ich will, ist Verhalten wie ich in einem Desktop-Chrome-Browser bekomme, aber ich kann nicht scheinen, einen Weg, dass entweder zeigt nicht den gesamten HTML5 Canvas an oder stürzt die App sofort ab.

Hier ist die JS ich die Leinwand positionieren bin mit, die (Chrome in Desktop) arbeitet - beachten Sie, dass Leinwand # Brett ist das Canvas-Element.

<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); 

Dies zentriert die Leinwand in beiden Dimensionen unabhängig von der vollen Darstellungsgröße und zentriert den submitDialog (ein div, die schließlich verwendet, um hohe Punktzahlen zu unterbreiten).

Was ich möchte, ist eine Möglichkeit, entweder die HTML/JS oder die Android-Projektkonfiguration zu ändern, um das gleiche zu erreichen. Das Ideale ist, dass ich das WebView automatisch auf 90% der Bildschirmgröße skalieren lassen kann. Irgendwelche Gedanken? Mein Dank im Voraus!

Answer 1

Ich fand die Antwort. Ich war nie in der Lage, um es über das Manifest orientation = Landschaft Eigenschaft funktioniert, aber mit setRequestedOrientation() in onCreate() funktioniert perfekt. Ich musste auch die WebView Dimensionen auf die genaue Größe festlegen, die das JS das Canvas-Element festlegt.

Es gab ein paar Probleme mit Maßstab und Offset, leicht gelöst durch Anpassen der Skalen- und Randeigenschaften des WebView (wieder mit magischen Zahlen, aber ich bin sicher, dass die richtigen Werte für jedes Gerät berechnet und eingestellt werden konnten onCreate().