Foldable Device Configurator is a little Web Components which you can drop in your application to test the CSS Spanning Polyfill located here
This demo is being developed by :
Go to https://darktears.github.io/foldable-device-configurator/demo/index.html (source)
Foldable Device Configurator :
Web Based Emulator :
On an actual device (Asus ZenBook Pro Duo) :
This web component will let you emulate various foldable configurations and will set the foldable polyfills accordingly. Currently there are two polyfills you can use to design or adapt web contents for foldable devices :
Both are proposals from Microsoft.
This project makes use of ECMAScript Modules (ESM) and runs them directly in the browser using Snowpack. If you install new dependencies using npm
like npm install --save @material/mwc-button
, then please run npx snowpack
afterwards to generate the new modules in web_modules
folder. Also, the web_modules
folder should be committed.
To install app dependencies and but any further steps, run
$ npm install
ESM compatible modules can be found using pika.dev. Material design web components can be found by searching for @material/mwc-
. You can try out the demo page here: Material Web Components demo
Then run
$ npx snowpack --optimize
To test in the browser, run
$ npm run start
To build, run
$ npm run build