Certified Cisco & Juniper Partner Company

The Foldable Phone CSS Technology - Media Queries

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.

Foldable Phone Viewport

Syntax

The spanning 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 file

import 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.

Our Vertical Experience for
Connecting Intelligence, Data, Concepts, Applications & Ultimately People

Frequently Asked Questions

Will you replace my Current UI UX Design if I’m not satisfied?
Every UI UX design we create, we do it with our experience and expertise. However, in case it seems there are issues pertaining to your UI UX design, we guarantee new revision and sample immediately ensuring the reason for change is addressed in your new UI UX Designs.
What is the main pain-point of the current version (if it exists) in UI/UX?
If you redesign a website or application, find out the shortcomings of the current product, and focus on improving the product in the redesign process. You can also ensure that these features are fully covered in your research and user testing process.
How does your UI/UX designer estimate the timeline in the design process?
Our UI/UX designer takes into accountability of number of pages needed to be designed & developed for your application. He/She then estimate number of hours needed to design each page and hence give you exact timeline.
How do you think of the questions on the 'difference of UI/ UX design?'
Answers are different from people to people, each designer has his own understandings, “UX is not equal to the UI”, “UX design emphasis on technology and analysis, UI design closer to the graphic design.”
I Have my own developer, Do you just do UI UX Design for Mobile Apps?
Yes, we will closely work with your development until your development cycle completes and we will provide full support in UI UX Designs for your Mobile Application Development.
- Web Stories!
Let's Work Collectively!
Get a Free Quote now in just 1 Hour!
Call us / WhatsApp us / Email Us now at
Connecting Intelligence, Data, Concepts, Applications & Ultimately People.
Let's Print!

We are committed to serve you and add value to your business.

Mobile App Development Agency
App
Development
Download Now
Web Development Agency
Web
Development
Download Now
UI UX Agency
UI / UX
Deck
Download Now
Digital Marketing Agency
Digital
Marketing
Download Now