Building Web Layouts For Dual-Screen And Foldable Devices

One topic that’s been sitting in my “to write about” for quite some time now is writing CSS for Dual-screen devices. Stephanie Stimac wrote the post, which got published on Smashing Magazine Foldable devices are available to purchase, and are currently being used by consumers today, and with it comes an opportunity where we, as …


This content originally appeared on Bram.us and was authored by Bramus!

One topic that’s been sitting in my “to write about” for quite some time now is writing CSS for Dual-screen devices. Stephanie Stimac wrote the post, which got published on Smashing Magazine

Foldable devices are available to purchase, and are currently being used by consumers today, and with it comes an opportunity where we, as developers, can start to explore this new class of device and the next evolution in responsive design.

A typical use-case would be a layout such as a mail client or a navigation app:

In Chromium, the DevTools allow you choose the Surface Duo as a device. With the “Toggle Dual-Screen” button at the top, you can enable/disable the dual screen.

Edge DevTools with Dual-Screen Mode enabled

Only got the emulation to work in Microsoft Edge 99 though, not in Google Chrome 99. Testing in Chrome Canary 101 it works fine, though

Building Web Layouts For Dual-Screen And Foldable Devices →


This content originally appeared on Bram.us and was authored by Bramus!


Print Share Comment Cite Upload Translate Updates
APA

Bramus! | Sciencx (2022-03-06T09:46:52+00:00) Building Web Layouts For Dual-Screen And Foldable Devices. Retrieved from https://www.scien.cx/2022/03/06/building-web-layouts-for-dual-screen-and-foldable-devices-2/

MLA
" » Building Web Layouts For Dual-Screen And Foldable Devices." Bramus! | Sciencx - Sunday March 6, 2022, https://www.scien.cx/2022/03/06/building-web-layouts-for-dual-screen-and-foldable-devices-2/
HARVARD
Bramus! | Sciencx Sunday March 6, 2022 » Building Web Layouts For Dual-Screen And Foldable Devices., viewed ,<https://www.scien.cx/2022/03/06/building-web-layouts-for-dual-screen-and-foldable-devices-2/>
VANCOUVER
Bramus! | Sciencx - » Building Web Layouts For Dual-Screen And Foldable Devices. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/03/06/building-web-layouts-for-dual-screen-and-foldable-devices-2/
CHICAGO
" » Building Web Layouts For Dual-Screen And Foldable Devices." Bramus! | Sciencx - Accessed . https://www.scien.cx/2022/03/06/building-web-layouts-for-dual-screen-and-foldable-devices-2/
IEEE
" » Building Web Layouts For Dual-Screen And Foldable Devices." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2022/03/06/building-web-layouts-for-dual-screen-and-foldable-devices-2/. [Accessed: ]
rf:citation
» Building Web Layouts For Dual-Screen And Foldable Devices | Bramus! | Sciencx | https://www.scien.cx/2022/03/06/building-web-layouts-for-dual-screen-and-foldable-devices-2/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.