CSS Foldable Display Polyfill

Foldable phones are gaining traction, though still in their early stages. Several models are already available, all equipped with web browsers. Web designers will need to understand the fold location to create responsive designs that seamlessly adapt to the upper and lower (or left and right) screen halves¹.

This functionality appears to be implemented via env() constants, similar to how screen notches were handled.

A polyfill example uses the following CSS:

@media (spanning: single-fold-vertical) {
  body {
    flex-direction: row;
  }
  .map {
    flex: 1 1 env(fold-left);
  }
  .locations-list {
    flex: 1;
  }
}

An alternative approach could be:

@media (spanning: single-fold-vertical) {
  .page-wrap {
    display: grid;
    grid-template-columns: env(fold-left) 1fr;
  }
}

The absence of fold-right is noteworthy. Given the current trend towards logical properties, fold-inline-start might be a more suitable option.

1. The long-term relevance of this statement remains to be seen. Future foldable phones may well incorporate multiple screen segments.

The above is the detailed content of CSS Foldable Display Polyfill. For more information, please follow other related articles on the PHP Chinese website!