Größe und Layout

Ein <caputchin-game> kann in drei Layouts gerendert werden (mit dem layout-Attribut gesetzt): inline, modal und fullscreen. Wie du es dimensionierst, hängt vom Layout ab, denn die Layouts modal und fullscreen zeigen zwei getrennte Boxen:

• Das Element in der Seite: das Ding, das im Fluss deiner Seite sitzt. In inline ist das das ganze Spielpanel; in modal / fullscreen ist es die kleine Checkbox, die der Besucher klickt, um das Spiel zu öffnen.
• Die Spiel-Box: der Dialog, der in modal / fullscreen darüber aufgeht, mit dem Spiel darin. (In inline gibt es keinen separaten Dialog: das Panel ist das Spiel.)

Vier Attribute dimensionieren diese zwei Boxen. Jeder Wert ist einer von auto (der Standard), full (überspannt den verfügbaren Platz) oder eine positive Pixelzahl wie 480.

Inline

Inline hat eine einzige Box, also dimensionieren width / height das ganze Panel. overlay-width / overlay-height bewirken hier nichts und werden ignoriert (das Widget protokolliert eine Warnung, wenn du sie setzt).

<!-- A panel that spans its container, at a fixed height -->
<caputchin-game sitekey="cpt_pub_..." layout="inline" width="full" height="480"></caputchin-game>

Modal und fullscreen

Hier sind die zwei Boxen unabhängig. width / height dimensionieren die Eingangs-Checkbox auf deiner Seite; overlay-width / overlay-height dimensionieren den Dialog und das Spiel, die aufgehen, wenn der Besucher sie klickt.

<!-- Full-width entry checkbox; the game opens at its natural size, centered -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" width="full"></caputchin-game>

<!-- Compact entry checkbox; the game fills the dialog -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" overlay-width="full" overlay-height="full"></caputchin-game>

<!-- A 500px entry, opening a fixed 900x600 game dialog -->
<caputchin-game
  sitekey="cpt_pub_..."
  layout="modal"
  width="500"
  overlay-width="900"
  overlay-height="600"
></caputchin-game>

overlay-width="full" lässt das Spiel den Dialog entlang dieser Achse füllen; ein Pixelwert pinnt das Spiel auf diese Größe (ein Modal schmiegt sich eng darum). In fullscreen deckt der Dialog bereits den Viewport ab, also steuert overlay-*, ob sich das Spiel streckt, um ihn zu füllen, oder zentriert in seiner eigenen Größe sitzt.

Wenn du die Spiel-Box ungesetzt lässt

Wenn du overlay-width / overlay-height nicht setzt, nimmt die Spiel-Box die Größe, die der Spiel-Autor für das Spiel gewählt hat (seinen bevorzugten Platzbedarf, deklariert in der caputchin.json des Spiels). Meistens brauchst du also nur width / height für dein Seitenlayout, und das Spiel dimensioniert sich vernünftig selbst. Setz overlay-* nur, wenn du das überschreiben willst.

Auf schmalen Bildschirmen

Wenn das Spiel breiter ist als der Platz, den es bekommt (ein Smartphone, eine schmale Spalte), hält das Widget es innerhalb dieses Platzes, sodass es deine Seite nie in die Breite drückt. Wie es sich einpasst, hängt davon ab, wie der Spiel-Autor es in der caputchin.json des Spiels deklariert hat:

• Ein responsives Spiel übernimmt die schmalere Breite und zeichnet sich dafür neu, in seiner üblichen Höhe.
• Ein als nicht responsiv markiertes Spiel ("responsive": false unter marketplace.support) behält seine Form. Das Widget verkleinert das ganze Spiel gleichmäßig, es sieht also gleich aus, nur kleiner. In modal und fullscreen verkleinert es sich außerdem auf die Bildschirmhöhe, für ein quer gehaltenes Smartphone.

Das gilt, wenn das Spiel seine Box selbst dimensioniert. In inline heißt das, du lässt width und height ungesetzt; in modal / fullscreen heißt es, dass weder overlay-width noch overlay-height full ist. Eine Achse, die du ungesetzt lässt, zählt ebenfalls als full, wenn der Spiel-Autor diese Achse im bevorzugten Platzbedarf des Spiels (in der caputchin.json) auf full gesetzt hat. Eine Box, die auf einer Achse full ist, streckt das Spiel stattdessen, bis es sie füllt.

Pixelwerte

Eine schlichte Zahl sind CSS-Pixel: width="500" und width="500px" sind gleichwertig. Null, negative und nicht-numerische Werte werden abgewiesen (das Attribut fällt auf seinen Standard zurück und das Widget protokolliert eine Warnung).

Siehe auch

• Spiel-Widget-Element: der vollständige Attributsatz von <caputchin-game>.
• Widget-Methoden und -Events: das Widget treiben und darauf reagieren.