# Helskärm, säkra områden och HUD-hörn för PlayDrop-spel

Låt ett PlayDrop-spel fylla skärmen och håll HUD:en inom CSS-säkra områden och fri från värdens kontroller med SDK:ts uppmätta reservedCorners.

Source: https://www.playdrop.ai/sv/create/learn/viewport

PlayDrop ger ditt spel hela skärmen: spelsidan på webbplatsen har en egen helskärmskontroll och apparna spelar spel i helskärm. På telefoner placerar PlayDrop små kontroller för Paus och Ljud (och en röstkontroll under en grupp) över spelets övre hörn. SDK:t talar om exakt var de finns, så att HUD:en kan hålla sig undan utan att slösa utrymme.

## Fyll visningsytan

Rita från kant till kant och hindra sidan från att rulla, zooma eller markera text:

```html
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
<style>
  html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
  body { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  canvas { display: block; width: 100vw; height: 100dvh; }
</style>
```

Ange canvasens storlek som den visade storleken gånger `devicePixelRatio` och rita om vid `resize`; fönster byter storlek på datorer, surfplattor och vikbara telefoner och när telefonen vrids. Bakgrundsbilder och spelplanen går överallt, även under kamerahack och värdens kontroller. Bara interaktiva och läsbara HUD-element behöver undvika dem. Du behöver ingen egen helskärmsknapp.

## Håll HUD:en fri

Två saker kan täcka kanterna:

- **Maskinvarans säkra områden**, som ett kamerahack eller hemindikatorn, från CSS `env(safe-area-inset-top|right|bottom|left)`.
- **Värdens kontroller**, från `sdk.host.reservedCorners`: `{ topLeft: { width, height }, topRight: { width, height } }`, i CSS-pixlar mätta från det övre vänstra och det övre högra hörnet av spelets visningsyta.

Undvik unionen av de två, aldrig deras summa. Ett HUD-element uppe till vänster kan ligga under hörnrektangeln eller bredvid den; använd i båda fallen det största av varje avstånd:

```js
const root = document.documentElement.style;
function layoutHud(corners) {
  const left = corners?.topLeft ?? { width: 0, height: 0 };
  const right = corners?.topRight ?? { width: 0, height: 0 };
  root.setProperty("--pd-tl-h", `${left.height}px`);
  root.setProperty("--pd-tr-h", `${right.height}px`);
}
layoutHud(sdk.host.reservedCorners);
const stop = sdk.host.onReservedCornersChange(layoutHud);
```

```css
.score { position: absolute; left: max(12px, env(safe-area-inset-left));
  top: max(12px, env(safe-area-inset-top), var(--pd-tl-h, 0px)); }
.lives { position: absolute; right: max(12px, env(safe-area-inset-right));
  top: max(12px, env(safe-area-inset-top), var(--pd-tr-h, 0px)); }
```

- Noll i bredd och höjd betyder att inget täcker det hörnet, till exempel på webbplatsen på en dator, där kontrollerna ligger utanför spelet.
- `null` betyder en äldre värd som inte rapporterar hörn: behåll din befintliga layout med säkra områden.
- Värdena kommer från de kontroller som faktiskt finns på skärmen, som tryckytor på minst 44 punkter på telefoner, och ändras vid vridning, storleksändring och grupper. Läs dem; hårdkoda aldrig en storlek och reservera aldrig ett band över hela bredden upptill.

Avsluta prenumerationen med den returnerade funktionen när du stänger ner spelet.

## Orientering och ytor

Deklarera var spelet fungerar i [catalogue.json](https://www.playdrop.ai/sv/create/learn/catalogue-json): `surfaceTargets` listar `desktop`, `mobileLandscape` och `mobilePortrait`, och `primarySurface` anger den yta som spelet är gjort för. Aktivera bara det du har testat. Ett spel i stående format som visas på en bred skärm ska ändå fylla den med en sammanhängande bakgrund i stället för svarta kanter, och ett [Instant](https://www.playdrop.ai/sv/create/learn/instant-games)-spel måste vara gjort för stående format i första hand.

## Inmatning på pekskärmar

Gör kontrollerna bekväma för tummar: minst 44 CSS-pixlar, på avstånd från de reserverade hörnen och från skärmkanterna där systemgester börjar. Använd pekarhändelser, anropa `preventDefault()` för spelets touchhändelser och stöd tangentbord och mus på datorer. Handkontroller beskrivs i [lokala grupper och handkontroller](https://www.playdrop.ai/sv/create/learn/local-party).

## Relaterade guider

- [Inläsning, paus och ljud](https://www.playdrop.ai/sv/create/learn/lifecycle): Initiera PlayDrop-SDK:t, signalera ready vid den första spelbara bildrutan, pausa och återuppta snyggt, följ ljudpolicyn och förladda filer för offlinespel.
- [Lokala grupper och handkontroller](https://www.playdrop.ai/sv/create/learn/local-party): Läs fysiska handkontroller och PlayDrops telefonkontroller via sdk.device, följ lokala spelarplatser och deklarera handkontrollsstöd och gruppstorlekar.
- [Klient-SDK](https://www.playdrop.ai/sv/create/learn/sdk): Referens för PlayDrops webbläsar-SDK: livscykel, identitet och sparningar, handkontroller, socialt, flerspelarläge, butik, annonser, topplistor, assets och AI.