Thiết lập trang

The host draws your page edge to edge and hides its native header. Your page owns the whole screen, including the area under the status bar, the notch and the home indicator.

1. Use viewport-fit=cover. Without it, iOS leaves an empty band at the top.

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<!-- Optional: match your background to avoid a white flash while loading -->
<meta name="theme-color" content="#ffffff" />

2. Pad for the safe area. Use the standard CSS env() values, or the CSS variables the host sets on <html> (--sat, --sab, --sal, --sar, in px):

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* or, from the host's own measurement: */
header {
  padding-top: var(--sat, 0px);
}

In JavaScript, use useSafeArea() (React) or await sdk.getSafeArea().

3. Keep the top-right corner clear. The host floats two buttons there, just below the safe-area inset: ⋮ (menu: bookmark, reload) and ✕ (close). Keep about 90 × 40 px free under the top-right corner. Do not draw your own close button, because the host already has one.

4. Defaults the host injects (you can change two of them, see Look and feel):

Default	Override
Text selection disabled (inputs and contenteditable still work)	sdk.setTextSelectable(true)
Scrollbars hidden	sdk.setScrollbarVisible(true)
Pinch-zoom and double-tap zoom disabled	not overridable