Как CSS помогает верстать под складные устройства
Designing for Dual Screen and Foldable Devices with CSS (2023)
С выходом Google Pixel Fold Стефани Стимак напоминает, что для складных устройств уже есть медиазапросы horizontal-viewport-segments и vertical-viewport-segments, а также переменные окружения viewport-segment-*. Они позволяют автоматически подстраивать макет под два экрана и стык без создания отдельных дизайнов под каждую модель. В статье разобран пример рецепта на CSS Grid, показана поддержка в Microsoft Edge и даны рекомендации, когда стоит добавлять двухэкранный режим.
Когда я только начала говорить о дизайне для двух экранов, многие реагировали негативно. И, честно говоря, никто не заставляет вас создавать сайт или приложение, которое адаптируется при развёртывании на двух дисплеях.