Web Layouts for Dual-Screen and Foldable Devices

Web Layouts for Dual-Screen and Foldable Devices

Gamers, developers, and designers – these are some of the most common users of foldable and dual-screen devices. And targeting such devices vis-à-vis an appealing web design requires special techniques. Thus, you need to hire web design companies in NYC that can create web layouts for dual screens.

Devices with two screens have been on the market for about three years. In that time, new web platform technologies have been developed in response to developer feedback, allowing for web layout that adjusts to these devices. These web platform features interact with existing concepts like viewports and media queries, allowing developers and designers to spend more time thinking about how to combine two displays to create superior experiences rather than learning a new set of code.

New CSS Media Features:

While current websites will continue to function normally, making them aware of the device’s foldable nature will considerably improve the user experience.

Web developers may now treat foldable devices as another responsive web design target thanks to a new CSS screen-spanning media capability and a set of predefined environment variables. Developers may now develop layouts that respond to any device category without relying on specific hardware specifications.

Detecting display regions:

The CSS screen-spanning media feature will allow web developers to check if the root viewport is being spanned across several adjacent display regions, as well as offer information about how these subsequent display regions are configured.

There are two possible values for the viewport segments media query.

  • Single-fold-vertical:

Suits a device with a single fold and a vertical fold posture.

  • Single-fold-horizontal:

Suits a device with a single fold and a horizontal fold posture.

Calculating the geometry of display regions:

These four predefined CSS environment variables will aid site developers in calculating the size of each display zone and ensuring they know how much their content, if any, needs to be padded to prevent the mask:

  • env(fold-top)
  • env(fold-left)
  • env(fold-width)
  • env(fold-height)

These variables’ values are in CSS pixels and are related to the layout viewport.

  • Using CSS env() Variables to Place Content:

To insert content within the display region bounds, you may use CSS environment variables, which are especially useful if you want to insert content directly against the hinge or fold.

Detecting Foldable Devices using JavaScript:

When you can’t or don’t want to use CSS media queries to check whether your user is on a foldable device, the JavaScript API comes in handy.  Initially, a brand-new API called Windows Segments Enumeration was proposed, but after getting feedback from the developer community through origin trials, it made significantly more sense to build off the current Visual Viewport API initial specification.

When To Use The Javascript API Vs The CSS Media Features To Detect Devices:

Both the CSS media features and the JavaScript segment property will detect a dual-screen device, however, the JavaScript property is better used when no CSS is present, which can occur when dealing with Canvas2D and WebGL objects.

Availability Of API Browsers And Testing Without A Device:

Starting with version 97, these dual-screen APIs are available by default in Microsoft Edge and Edge on Android. These are expected to be added to additional Chromium browsers soon, but no exact date has been set. Go to chrome:/flags and allow experimental web platform features to enable these APIs in Chrome.

A polyfill for the Visual Viewport segments property is provided if you’re on a desktop or device that doesn’t support these APIs. CSS Media Queries do not have an API. The majority of dual-screen devices on the market are Android-based, and these APIs will be included in Chromium-based browsers for Android.

If a browser on a foldable device doesn’t support these elements, you can either use the polyfill or make sure your website displays well on a small single screen, as the user can pick how a website is displayed on a dual-screen device.

Users can still use the single display view if your website doesn’t have a dual-screen implementation.

Wrapping Up

Dual-screen devices are merely the next step in the responsive design process. The APIs available enable incorporating into your existing code base easilyif you have a PWA or website. Other options for creating programs for dual-screen devices may be found in the Surface Duo documentation. It’s an exciting period for web layout, and multiple displays provide you even more room to express yourself. However, as described above, getting them designed isn’t easy. Therefore, you must rely on professional and reliable services. And for this, you can trust Mapit Marketing Group. It is one of the leading web design and digital marketing agency in NYC offering an array of services at the most competitive rates.

By Admin

Leave a Reply

Your email address will not be published.