" One of the most popular smartphone brands, Samsung, recently unveiled their foldable phone Samsung Galazy Fold & Z Flip. This is some exciting technology, but is your mobile responsive website is designed and programmed to look good across any resolution? When we develop responsive websites we ensure that the website looks great at all resolutions including foldable phones viewport. If your website is not looking good on foldable phones? Contact us and we'll make it work for you. "
The Foldable Phone CSS Technology - Media Queries
This is a polyfill for the proposed CSS Foldable Display extensions. Web developers targeting foldable devices want to be able to effectively lay out the content in a window that spans multiple displays. CSS Foldable Display extensions provides a mean to do that using stylesheets.
The "spanning" CSS media feature
The
spanning CSS media feature can be used to test whether the browser window is spanning across multiple diplays.
Syntax
Thespanning media feature value can be one of the following keywords:- single-fold-vertical
- This value matches when the layout viewport is spanning a single fold (two screens) and the fold posture is vertical.
- single-fold-horizontal
- This value matches when the layout viewport is spanning a single fold (two screens) and the fold posture is horizontal.
- none
This value describes the state of when the browser window is not in spanning mode.
Device fold CSS environment variables
Foldable phones are starting to be a thing. Early days, for sure, but some are already shipping, and they definitely have web browsers on them. Stands to reason that, as web designers, we are going to want to know where that fold is so we can design screens that fit onto the top half and bottom half… or left half and right half.
Device fold CSS environment variables
@media (spanning: single-fold-vertical) { body { flex-direction: row; } .map { flex: 1 1 env(fold-left) } .locations-list { flex: 1; } }@media (spanning: single-fold-vertical) { .page-wrap { display: grid; grid-template-columns: env(fold-left) 1fr; } }There are 4 pre-defined CSS environment variables, which can be used to calculate each screen segment size at both landscape and portrait orientations.
1. fold-top
2. fold-left
3. fold-width
4. fold-height
While the spanning media query guarantees there is only a single hinge and two screen segments, developers must not take a dependency that each screen segment is 50% of the viewport height or width, as that may not always be the case. The values of these variables are CSS pixels, and are relative to the layout viewport (i.e. are in the client coordinates, as defined by CSSOM Views). When evaluated while not in one of the spanning states, these values will be treated as if they don't exist, and use the fallback value as passed to the
env() function. How to use the polyfill
This polyfill is packaged as a JavaScript module. It is available on NPM over here.
To install the polyfill just run:npm install --save spanning-css-polyfill
Then you can include it in your project:spanning-css-polyfill.js
or in your JavaScript source fileimport spanning-css-polyfill/spanning-css-polyfill.js
and start using the new CSS features.
That's it. In order to change the display configuration, you can use the polyfill together with an emulator or you can change the settings manually. The settings are stored across sessions.
