2016-06-10 5 views
1

Ich habe ein Web-Spiel, das in GWT gebaut wurde. Ich bemühe mich wirklich, es mobilfreundlich zu machen. Um mehrere Bildschirmgrößen für den Desktop zu unterstützen, habe ich nur die CSS-Eigenschaft "transform: scale (*)" verwendet, scheint aber für die mobilen Browser nicht gut zu sein. Irgendwelche Richtlinien/Tipps, wie man das anpackt? Convert GWT Web-Spiel, um mobile Browser zu unterstützen

Antwort

3

Es gibt nicht viel GWT-spezifische über responsive Design. Die meisten Techniken sind für alle HTML/CSS/JS-Frameworks gleich. (NB: Sie sollten nie Verwendung scale() als Weg in eine Bildschirmgröße angepasst.)

Was ich mag über die GWT, jedoch ist die Fähigkeit, verschiedene Layouts für unterschiedliche Bildschirmgrößen zu erstellen, und erstellen Sie separate Permutationen für Smartphones und Tablets/Desktops anstelle von Medienabfrage-Breakpoints oder anderen Techniken, die den Code oder CSS-Dateien aufblähen. Um dies zu erreichen, erzeuge ich typischerweise eine abstrakte Sichtimplementierung (d. H. GameboardViewImpl), die für alle Formfaktoren gemeinsame Code- und UI-Referenzen enthält, und erweitere dann diese abstrakte Sichtimplementierung, um formfaktorspezifische Implementierungen zu erzeugen, z. GameboardViewImplDesktop und GameboardViewImplPhone. Dieser Ansatz erzeugt nicht nur einen kleineren und effizienteren Code, sondern auch Code, der viel einfacher zu entwickeln und zu pflegen ist. Sie können den Browser einfach aktualisieren und sehen, wie jede Ansicht im Desktop-, Tablet- oder Telefonformat aussieht. Wenn etwas nicht richtig aussieht, wissen Sie genau, wo Sie es beheben müssen.

Werfen Sie einen Blick auf MGWT - Sie möglicherweise oder nicht alle plattformspezifische Widgets und Stile, mit denen es kommt, aber mindestens können Sie MGWT.getFormFactor() und ähnliche Methoden verwenden.

+0

Danke. 1. Warum sollte ich keine Waage benutzen? 2. Ich habe eigentlich fast kein Widget benutzt, also glaube ich nicht, dass MGWT mir helfen kann. Layout weise, lassen Sie uns sagen, ich möchte nur das Trivialste - das gleiche Layout haben, aber ich möchte es in einen mobilen Bildschirm passen. Verstehe immer noch nicht, wie ich das erreichen kann. –

+0

Es gibt viele Gründe, die Skalierung nicht zu verwenden, aber das Wichtigste: Sie kann die Benutzeroberfläche unleserlich oder absurd groß machen, wenn Sie von meinem Bildschirm (2560x1440 CSS-Pixel) auf ein kleines Telefon (320x533 CSS-Pixel) skalieren. Und Sie nutzen nicht die xhdpi und hdpi Auflösungen, um Ihr Spiel scharf zu machen. –

+0

MGWT macht es einfach zu erkennen, welche Formfaktoren und Bildschirmdichten Ihre Benutzer haben. Sie können es in reinem JS natürlich tun, wenn Sie bevorzugen. –

Verwandte Themen