Landscape and split-screen are different width values of the same rules

What it is

The input a layout actually consumes is available width (plus matching height and safe area), not "is this landscape" or "is this split-screen". Rotating a phone, snapping a tablet window in half, and dragging a desktop browser narrower are different numbers plugged into the same width variable. One set of width-conditioned rules should yield the same result at those values: 720 CSS pixels is 720, whether it came from landscape or from a split. Writing orientation: landscape as a second design splits one width axis into two disconnected branches.

This is what the independent variable of the rules should be — not where breakpoint numbers are measured, and not whether object identity survives a switch.

Why it happens

orientation in a media query compares which of viewport width and height is larger; it does not say how much room the content has. A portrait tablet can be wider than a landscape phone; a split desktop pane can be narrower than a phone in portrait. If landscape takes a two-column layout and portrait a one-column layout, a split window matches neither product intent and falls down the wrong branch — or both. Width rules have no such blind spot: the input is one length, the output is one arrangement.

Height still changes — landscape is shorter, splits are sometimes flatter — that is a second axis, used to collapse what will not fit vertically, not to duplicate a whole horizontal layout. Safe areas, notches, and system gesture bars change hittable edges; they should not trigger a full-page restyle unrelated to width. Bundling pointer coarseness or hover capability into orientation mis-classifies a landscape tablet with a hardware keyboard.

Where it stops holding

Cameras, maps, and video players have real orientation semantics: sensor attitude decides whether the picture should rotate, and that cannot be folded into "width changed". Locked orientation in fullscreen immersion is a platform capability, not a responsive width rule. Print, fixed canvases, and AR planes do not offer this viewport width. aspect-ratio still helps on extremely wide, flat strips (should a toolbar grow taller or shorter), but it patches the height axis, not a second landscape brand. Foldable hinges and a second display are extra surfaces; they are not "another value of the same viewport width" — that is multi-surface, not a split that narrowed one pane.

Applying it

• Drive column count, nav form, and grids with min-width / max-width (or container width). Do not switch the main layout on orientation: landscape | portrait.
• Treat landscape, split-screen, and a dragged window as sampling points of one rule set, not three product lines. When height is insufficient, collapse secondary blocks on their own; do not replace the horizontal structure with them.
• Query pointer, hover, and safe-area on their own; do not bundle them into orientation.
• How to check: at the same pixel width, compare a true landscape with a split / resized pane from portrait — the main structure should match. Then pick a pair where "portrait tablet width > landscape phone width" and confirm column count did not follow orientation instead.

Related

• Same group: R3.11.1 Breakpoints belong where content becomes hard to read, not at device widths · R3.11.2 Layout switches must keep elements recognisably the same
• Nearby: R3.03 Responsive Implementation · K1.02 Screen Size and Density
• Search terms: width-valued layout rules · orientation · split-screen · min-width