Design ExpertsDesign ServicesUI / UX<< View All Blogs

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.



  • fold-top

  • fold-left

  • fold-width

  • 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:

 <script type="module" src="/path/to/modules/spanning-css-polyfill.js">script>

or in your JavaScript source file


import "/path/to/modules/spanning-css-polyfill/spanning-css-polyfill.js";

and start using the new CSS features.



  • That's it. See the demo/ directory for examples.


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.

About the Author
Article Published on:


Popular Tags written by Rajat Gupta for Is your UI/UX, Website Design or Mobile App ready for Foldable Phones?
#uiux #uiuxdesign #uiuxdesigner #uxdesigner #uxdesign #uxui #uiuxdesigns #uiuxzone #uiuxinspiration #uxuidesign #uxuidesigner #mobileappdesign #appdesigner #webdesigner #dailyui #userinterface #userexperience #uitrends #uxigers #uxd
People who Believe in Us!
1,100+ Completed Projects in 30+ Countries
Is your UI/UX, Website Design or Mobile App ready for Foldable Phones? for Safeguard
Is your UI/UX, Website Design or Mobile App ready for Foldable Phones? for escabid
Is your UI/UX, Website Design or Mobile App ready for Foldable Phones? for world olympians association
Is your UI/UX, Website Design or Mobile App ready for Foldable Phones? for EMTV
Is your UI/UX, Website Design or Mobile App ready for Foldable Phones? for Brandmuscle
Is your UI/UX, Website Design or Mobile App ready for Foldable Phones? for funstoop

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.
Talks of Every Corner!
Influxive Journal - The Blogs
Growth Of Blockchain Since 2017...
Blockchain Development Enterprise Services

It is no denying that the mainstream viability of cryptocurrency as a whole is sitting in a tad dubious box seat; however, if there’s one win...

How to Configure Full Page Cache / Vanish Cache in Magento 2...
Hire Magento 2 Developer Hire Magento Developer Magento

The cache management system that will help you improve the performance of your site better and better. In addition, the Magento system will auto-sh...

How UX Can Help You Achieve Your Business Goals...
UI / UX

Users sit at the forefront of every business no matter the domain, no matter the service one’s providing. At the end of the day after all tha...

Let's Work Collectively!

Send us an email to get started.

We are committed to building robust and scalable applications that creates efficient business processes and adds value to your business.

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