

The viewport segments media query can have two values. We already use media features and queries to target desktops, tablets, and mobile phones today, and now we have the CSS Viewport Segments media feature to target our foldable and dual-screen devices. Detecting Foldable Devices With New CSS Media Featuresĭual screen and foldable devices are just the next step in responsive design, so they’re viewed as another responsive design target that we can style for with media features.
END SPLIT SCREEN ANDROID HOME PAGE SAMSUNG EDGE HOW TO
The beautiful thing about these APIs is that they integrate with existing concepts, so designers and developers don’t have to spend time learning new concepts, but can think about how to build enhanced experiences for users on dual-screen devices. The APIs that were initially designed to solve for building layouts on dual-screen devices have gone through some revisions after feedback from developers who used the APIs in browser origin trials. 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. Since then, the Surface Duo 2, Samsung Galaxy Z Fold 3 and Galaxy Z Flip 3 have all hit the market. It’s now been more than two years since the Samsung Galaxy Fold and Surface Duo were introduced to the world. These web platform capabilities integrate with existing concepts, such as the viewport and media queries, so that developers and designers can spend more time ideating about how to leverage two displays to create enhanced experiences rather than learning a new set of code to build them. In that time new web platform technologies have been built with developer feedback to enable layout on the web that adapts to these devices.

Dual-screen devices have been on the market for nearly three years.
