238
adaptive layout
also size class, window size class
A tablet is a different layout, not a phone screen stretched.
What is adaptive layout?
Adaptive layout changes structure with the size class or window size: a tab bar becomes a sidebar, a stack becomes two columns. Scaling the phone UI with a multiplier wastes the tablet and breaks split screen. Rotation and a floating window on Android are size changes, not a separate app.
Why does adaptive layout matter when vibe coding?
The generated tablet build is the phone layout with larger type. Split screen overflows. A foldable is untested. The prompt never said size class.
How do you do adaptive layout?
Pick compact and regular layouts. Test the smallest phone, a tablet, and split screen. Do not branch on “iPad” as a device name. Branch on the size you were given.
How do you ask a model for adaptive layout?
Adapt (screen) to compact and regular size classes. Use a column on compact and (sidebar or two panes) on regular. Do not scale the phone layout. Do not detect iPad by device name.
What goes wrong with adaptive layout?
Reading the screen size once at launch. A split-screen drag never updates the layout.