subagentdevices

.com iPhone 16 Pro · Chrome 150 canary

← all techniques

Safe-area insets + viewport-fit=cover

Pads the sticky header, sticky nav, and main content's top/bottom using env(safe-area-inset-*), paired with <meta name=viewport content="...,viewport-fit=cover">, so nothing sits under the Dynamic Island or behind the home-indicator gesture bar.

Why it matters on this device/browser pairing

iPhone 16 Pro/Pro Max's Dynamic Island and rounded corners eat real screen space at the very top; without viewport-fit=cover the page never even receives the inset values to pad against.

The actual code

<meta name=viewport content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name=theme-color content=#0a0a0a>

#hdr{padding-top:calc(10px + env(safe-area-inset-top))}
nav{top:calc(41px + env(safe-area-inset-top))}
main{padding-bottom:calc(48px + env(safe-area-inset-bottom))}

Where it ships

subagentjobs.com subagentdata.com subagentcowork.com subagentcoworkers.com subagentcontracts.com subagenttasks.com subagentdevices.com subagentdomains.com subagentidentities.com subagentcitations.com subagentcache.com subagentrubrics.com subagentoutcomes.com subagentevaluations.com subagentapi.com subagentcli.com subagentbrands.com subagentskills.com subagentroles.com subagentmemories.com subagentmodels.com subagentdatamodels.com subagentrust.com subagentpython.com subagenttypescript.com subagentpermissions.com subagentvaults.com subagentsessions.com subagenttools.com subagenthooks.com subagentgraphql.com subagenthtml.com subagentswift.com subagentengineering.com subagentlegal.com subagentfinance.com subagentmanagers.com subagentsupport.com subagentplugins.com subagentsdk.com subagentservers.com subagentspec.com subagentprotocols.com subagenthandoffs.com