Best & Award winning UI UX Design Company in USA & India
" 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.

Web Stories - Talks of Every Corner!
Influxive Journal - The Blogs

How to use apples indoor positioning, bluetooth beacons, GPS or compass based positioning for A

Augmented Reality App DevelopmentInternet of Things (IOT)Virtual Team Outsourcing

The release of Apple’s ARKit and Google’s ARCore significantly improved the scalability of AR VR apps, offering a new era of AR experience. And for geo-spatial orientation, a perfect blend and coo...

How much does a Shopify Ecommerce Website Cost - Real Numbers?

Hire eCommerce DeveloperHire Shopify Website DeveloperHire Shopify Website Designer

At the lower end, any Shopify Ecommerce Website will cost you around $2500 bare bones. Often agencies have a minimum benchmark starting at around $3,000 - $30,000 and then the skies the limit dependen...

Selling Online with eCommerce Stores

Ecommerce WebsiteHire eCommerce DeveloperMagento

You need development of a perfect online ecommerce portal: mix and match with extensions for all the features you need to create a wholesale shop (or a combo wholesale/retail store). Offer special pri...