Key takeaways
- With 11% reserved at the top and 34% at the bottom of a 1080 × 1920 frame, the usable band is 1056 px (55% of the frame).
- Platform overlays differ by surface; the percentages are yours to set, with the platform pages giving the documented values.
How to use the margins
Enter the percentages the platform covers at the top and bottom. The result gives the pixel band where text and faces stay visible, and its start and end rows.
Overlays change with the surface and the app version, so check the platform page for the current figures and leave a small extra margin.
Scenarios
| Scenario | Top margin | Bottom margin | Usable band | Safe band |
|---|---|---|---|---|
| 1080 × 1920, 11% top, 34% bottom | 211 px | 653 px | 1056 px (55% of the frame) | y = 211 px to y = 1267 px |
| 1080 × 1920, 8% top, 20% bottom | 154 px | 384 px | 1382 px (72% of the frame) | y = 154 px to y = 1536 px |
| 1080 × 1350, 5% top, 10% bottom | 68 px | 135 px | 1148 px (85% of the frame) | y = 68 px to y = 1215 px |
| 720 × 1280, 11% top, 34% bottom | 141 px | 435 px | 704 px (55% of the frame) | y = 141 px to y = 845 px |
| 1080 × 1080, 6% top, 6% bottom | 65 px | 65 px | 950 px (88% of the frame) | y = 65 px to y = 1015 px |
Usable band for different overlays
On a 1080 × 1920 frame, the share left between the top and bottom overlays.
| Reserved | 15% at the bottom | 25% at the bottom | 34% at the bottom | 40% at the bottom |
|---|---|---|---|---|
| 5% at the top | 1536 px (80% of the frame) | 1344 px (70% of the frame) | 1171 px (61% of the frame) | 1056 px (55% of the frame) |
| 8% at the top | 1478 px (77% of the frame) | 1286 px (67% of the frame) | 1114 px (58% of the frame) | 998 px (52% of the frame) |
| 11% at the top | 1421 px (74% of the frame) | 1229 px (64% of the frame) | 1056 px (55% of the frame) | 941 px (49% of the frame) |
| 15% at the top | 1344 px (70% of the frame) | 1152 px (60% of the frame) | 979 px (51% of the frame) | 864 px (45% of the frame) |