It’s now been greater than two years for the reason that Samsung Galaxy Fold and Floor Duo had been launched to the world. Since then, the Floor Duo 2, Samsung Galaxy Z Fold 3 and Galaxy Z Flip 3 have all hit the market. Foldable units can be found to buy, and are presently being utilized by customers as we speak, and with it comes a chance the place we, as builders, can begin to discover this new class of machine and the subsequent evolution in responsive design.
The APIs that had been initially designed to resolve for constructing layouts on dual-screen units have gone by means of some revisions after suggestions from builders who used the APIs in browser origin trials. The attractive factor about these APIs is that they combine with present ideas, so designers and builders don’t should spend time studying new ideas, however can take into consideration tips on how to construct enhanced experiences for customers on dual-screen units.
Detecting Foldable Units With New CSS Media Options
Twin display screen and foldable units are simply the subsequent step in responsive design, in order that they’re considered as one other responsive design goal that we will type for with media options. We already use media options and queries to focus on desktops, tablets, and cell phones as we speak, and now we now have the CSS Viewport Segments media function to focus on our foldable and dual-screen units.
horizontal-viewport-segments
The viewport segments media question can have two values. The primary one is horizontal-viewport-segments, and this represents the state of the machine when the machine hinge is vertical and the viewports are cut up by the {hardware} hinge or fold into columns.
To serve kinds particularly for a foldable machine on this orientation we’d write the next:
@media (horizontal-viewport-segments: 2) {
// Types particular to the machine on this orientation
}
The integer represents the variety of viewports current within the machine orientation. When the machine is within the vertical fold posture like a e-book, we now have two distinct viewports within the horizontal route and just one viewport within the vertical route.
We are able to additionally mix our media queries to focus on twin display screen units and sure viewport widths to serve up particular kinds:
@media (horizontal-viewport-segments: 2) and (min-width: 540px) {
physique {
background: yellow;
}
}
vertical-viewport-segments
Our second worth for the viewport segments media function is vertical-viewport-segments, and that is the state of the machine when the machine hinge is horizontal, and the {hardware} hinge splits our viewports into rows.
To focus on units which can be rotated on this route we’d use the next code:
@media (vertical-viewport-segments: 2) {
// Types particular to the machine on this orientation
}
Utilizing JavaScript To Detect Foldable Units
There are situations the place you might not be ready or need to use CSS media queries to detect whether or not your person is on a foldable machine, and that is the place the JavaScript API is available in. Initially, a brand-new API known as Home windows Segments Enumeration was proposed, however after the suggestions from the developer group by means of origin trials, it made extra sense to construct off the prevailing Visible Viewport API draft specification.
Viewport Segments Property
Viewport segments characterize the areas of the window that reside on separate shows which can be adjoining to one another. To detect a dual-screen machine you’ll question the segments property with the next code:
const segments = window.visualViewport.segments;
The worth returned from this question will probably be an array of DOMRects that point out what number of viewports there are. If there is just one viewport phase, the question will return null, and is applied this strategy to forestall future compatibility points, in order that builders don’t begin utilizing visualViewport.segments[0] to focus on single-screen units.
On dual-screen units, the question will return 2 DOMRects, representing the two viewports obtainable when the browser window is spanning throughout the fold.
This worth we now have saved within the segments fixed is an immutable snapshot of the machine state when the attribute was queried, and if the browser window is resized or the machine is rotated, the viewport segments beforehand retrieved are not legitimate and have to be queried once more by means of a resize or orientation occasion (or each).
In case you resize the browser window to span throughout just one show area, we’ll hearth the resize occasion.
In case you rotate the machine, this can hearth each the resize and orientation occasion, and you should utilize the occasions to question the attribute once more to get the present state of the browser show areas.
window.addEventListener(“resize”, operate() {
const segments = window.visualViewport.segments;
console.log(segments.size); *// 1*
});
When To Use The JavaScript API vs The CSS Media Options To Detect Units
Each the CSS media options and JavaScript phase property will detect a dual-screen machine, however the JavaScript property is greatest used when there’s no CSS getting used, which might occur whenever you’re working with objects in Canvas2D and WebGL. An instance could be a sport that you simply’re creating that might leverage each screens.
Utilizing CSS env() Variables
Along with the CSS media options, six new CSS setting variables have been launched to assist builders calculate the geometry of the show areas, calculate the geometry of the hinge space when it’s being obscured by a bodily {hardware} function like on the Floor Duo, and so they may also be used to assist place content material with the bounds of every show area.
The six new setting variables are as follows:
env(viewport-segment-width <x> <y>);
env(viewport-segment-height <x> <y>);
env(viewport-segment-top <x> <y>);
env(viewport-segment-left <x> <y>);
env(viewport-segment-bottom <x> <y>);
env(viewport-segment-right <x> <y>);
The x and y positions characterize the two-dimensional grid created by {hardware} options that separate every viewport phase, with the coordinates 0,0 beginning on the top-left phase.
When you may have a tool that’s within the vertical fold posture with the viewports aspect by aspect, the viewport phase on the left could be represented by env(viewport-segment-width 0 0), and the one on the proper could be represented by env(viewport-segment-width 1 0). In case you turned the machine into the horizontal fold posture with the viewports stacked, the highest could be represented by env(viewport-segment-height 0 0), and the underside viewport by env(viewport-segment-height 0 1).
When utilizing env(viewport-segment-width) and env(viewport-segment-width), along with the indices, we will set a fallback worth like the next:
env(viewport-segment-width 0 0, 100%);
However this extra fallback worth is elective and as much as the discretion of the writer, in the event that they’d like to incorporate it.
Calculate The Hinge Width
When you may have a tool that has a hinge obscured by {hardware} options, you’re capable of calculate it utilizing the setting variables offered.
In our instance, we now have a tool within the vertical posture and need to discover the hinge width, in order that no content material is obscured. We’ll subtract the left viewport phase of the proper show from the proper viewport phase of the left show:
calc(env(viewport-segment-left 1 0) – env(viewport-segment-right 0 0));
Putting Content material With The CSS env() Variables
We are able to use the CSS setting variables to position content material throughout the show area boundaries, and these are particularly useful if you wish to place content material straight towards the hinge or fold.
In our instance under, we’re going to position a picture straight towards the hinge within the first show area on the left. This space is the proper phase of the viewport, so we’ll use viewport-segment-right to position it with the next code:
img {
max-width: 400px;
}
@media (horizontal-viewport-segments: 2) {
img {
place: absolute;
left: env(viewport-segment-right 0 0);
}
}
If we emulate our display screen within the Edge Developer Instruments in Floor Duo mode, we’ll get the next format:
This isn’t what we needed. The picture ought to be within the show area on the left aspect.
As a result of the picture is totally positioned with the left property, the left fringe of the picture finally ends up aligned to the viewport-segment-right show space.
We then must subtract the width of the picture from our surroundings variable to get the picture aligned to the right hinge edge:
img {
max-width: 400px;
}
@media (horizontal-viewport-segments: 2) {
img {
place: absolute;
left: calc(env(viewport-segment-right 0 0) – 400px);
}
}
And now we now have the picture positioned the place we would like it. For different examples on tips on how to align gadgets alongside the hinge, you possibly can take a look at this easy field demo. Open the Edge Developer Instruments > Machine Emulation after which select Floor Duo and guarantee your Duo emulation is within the correction orientation posture.
Placing It All Collectively: Let’s Construct A Recipe Web page That Adapts To A Twin Display screen Machine
As somebody who continually makes use of her cellphone whereas cooking, a recipe web site that might adapt once I’m on my dual-screen machine could be so useful. Let’s stroll by means of how to consider adapting a person recipe web page for it.
I need to take into consideration how I’m going to chunk out my major content material. Usually, at minimal, I see a recipe title, what number of servings it makes, how lengthy it’s going to take to cook dinner, a picture or a number of pictures, the substances, and the steps to make the dish.
Once I sketch out my wireframe, I get the next:
I need my title and the recipe particulars on the very high, adopted by a picture that’s going to take up the entire content material width, then the substances checklist, and the recipe steps. I don’t need to stack the latter two content material teams, as a result of the ingredient checklist may have a variety of white house to the proper of it if I stack them, so I need the steps to take a seat subsequent to the substances, giving me two columns under the picture.
CSS Grid Or Flexbox For Format?
I understand how I need to lay this recipe out on a traditional desktop display screen, and there are a number of methods I can go about coding this format and grouping content material, however how I group it, and what format I need to obtain on a dual-screen machine will have to be thought-about earlier than I code. Based mostly on the sketch I did for a desktop view, I may use a mixture of flexbox and CSS Grid to attain the format I need, the place I group the substances and steps in a flex container. However let me sketch out how I need my web page to show on a twin display screen.
If I need extra flexibility in format, then I can’t group my substances and steps in a flex container, in any other case, there’s going to be a giant hole of white house in whichever column the picture doesn’t go into.
Including Our Content material
I’m going to make use of nothing however CSS Grid for the desktop and dual-screen layouts. So, let’s construct out our content material.
<part class=”recipe”>
<div class=”recipe-meta”>
… <!—Incorporates our recipe title, yield and servings –>
</div>
<img src=”imgs/pasta.jpg” alt=”Pasta carbonara photographed from above on a country plate” />
<div class=”recipe-details__ingredients”>
…<!— Incorporates our substances checklist –>
</div>
<div class=”recipe-details__preparation”>
… <!— Incorporates our checklist of steps to place the substances collectively –>
</div>
</part>
</major>
Subsequent, let’s construct the construction of the web page. I’m going to outline my grid: I solely need three columns, and I need these to be an equal fraction of the container.
.recipe {
show: grid;
grid-template-columns: repeat(3, 1fr);
Subsequent, I’m going to outline my rows, and I’m going to make use of grid-auto-rows with minmax, in order that my rows are a minimal of 175px however can develop to a max of the maximal content material top.
grid-auto-rows: minmax(175px, max-content);
Then I’m going so as to add a couple of extra properties: my grip-gap, my max-content width, and a margin to middle my format on the web page.
grid-gap: 1rem;
max-width: 64rem;
margin: 0 auto;
}
I’m then going to position my content material into the grid I’ve outlined:
.recipe-meta {
grid-column: 1 / 4;
}
.recipe-meta p {
margin: 0;
}
img {
width: 100%;
grid-column: 1 / 4;
}
.recipe-details__ingredients {
grid-row: 3;
}
.recipe-details__preparation {
grid-column: 2 / 4;
grid-row: 3;
}
And that’s going to present me the format based mostly on my sketch:
Nice! However what about my dual-screen format? Let’s dive in and begin with our horizontal-viewport media function and our grid for twin screens.
Utilizing Media Queries And Adjusting The Container Format
First, that is what my format seems like on a twin display screen proper now:
And if we scroll down:
Not nice. Our content material is being obscured by the hinge, so let me begin redefining my grid.
For my grid columns I’m nonetheless going to make use of three columns, however I need one column to take up the primary viewport phase on the left, and the opposite two cut up on the proper viewport phase, so I’d get to make use of my CSS setting variable env(viewport-segment-width 0 0) which tells the browser, for my first column, I need it to occupy the entire viewport of the primary show area.
/* Physique kinds for smaller screens */
physique {
font: 1.3em/1.8 base, ‘Playfair Show’, serif;
margin: 0;
}
.recipe {
grid-template-columns: env(viewport-segment-width 0 0 1fr 1fr;
grid-template-rows: repeat(2, 175px) minmax(175px, max-content);
}
}
For my rows, I need a bit extra flexibility within the placement, so I’m going to repeat two rows of 175px, which is in regards to the top of the container with the recipe title, yield, and time info, and the rows after that ought to match what I outlined in my grid initially.
If I examine my design within the DevTools, I can see that the width and margin I set on my recipe container initially are pushing the grid strains that I need to be aligned with my viewport phase into the proper viewport phase.
To reset this, I’m going to reset my margin and max-width.
.recipe {
grid-template-columns: env(viewport-segment-width 0 0) 1fr 1fr;
grid-template-rows: repeat(2, 175px) minmax(175px, max-content);
margin: 0;
max-width: 100%;
}
}
And now I’m going to position my content material throughout the grid and modify my format.
.recipe-meta {
grid-column: 1 / 2;
padding: 0 2rem;
}
img {
grid-column: 2 / 4;
grid-row: 1 / 3;
width: 100%;
top: 100%;
object-fit: cowl;
/* essential to preserve the picture throughout the grid strains */
}
.recipe-details__ingredients {
grid-row: 2;
padding: 0 2rem;
}
.recipe-details__preparation {
grid-column: 2 / 4;
grid-row: 3;
padding: 0 2rem 0 3rem;
}
I’ve utilized padding to the content material aside from the picture which I’ve determined I need to span the entire viewport. For the content material beneath the picture, as a result of nature of the gridline beginning beneath the bodily hinge, I need to add additional padding, so it seems prefer it has the identical padding on the left aspect as the opposite gadgets with padding. If I don’t add additional, it can fall too near the hinge. As a result of I have already got a grid-gap of 1rem and I need to double the padding, I’ll add 3rem as an alternative of 4rem which supplies us our last format on a dual-screen machine:
With just a few small changes to our CSS and the usage of one of many new media options, we now have a format that adapts to a dual-screen machine. To take a look at the expertise, head to the demo web site right here in Edge or a Chromium-based browser and open the browser developer instruments to take a look at Floor Duo emulation. In case you’re opening the positioning in Chrome, make sure the experimental internet platform options flag is enabled beneath chrome://flags, in order that the demo shows accurately.
Single Display screen Responsive Design Particulars
And simply to make sure we’re taking into account small, single-screen units, the code I select for a format on a cellphone makes use of flexbox and places the whole lot right into a single column:
@media (max-width: 48rem) {
physique {
font: 1.3em/1.8 base, ‘Playfair Show’, serif;
}
.recipe-details {
show: flex;
flex-direction: column;
}
}
API Browser Availability And Testing With out A Machine
These dual-screen APIs can be found in Microsoft Edge and Edge on Android beginning in model 97 by default. These are slated to return to different Chromium browsers quickly, however there isn’t any confirmed date for when that will probably be. To allow these APIs in Chrome, go to chrome://flags and allow experimental internet platform options.
And whereas these are comparatively new units, many are actually going into their 2nd and third generations, so firms are investing in them. In case you can’t get your fingers on a bodily machine, one of the simplest ways to check is within the browser developer instruments. I’ve examined my web site in each the emulation instrument and on a Floor Duo, and the emulation instrument for Duo seems to be equivalent. My design seems the identical method on the machine because it does within the DevTools. It makes constructing and designing for a dual-screen machine simply as simple as creating for desktop and single display screen cellular units.
If you’re on a desktop or a tool that doesn’t help these APIs, there’s a polyfill obtainable for the Visible Viewport segments property. There is no such thing as a API for the CSS Media Queries. At the moment, the dual-screen units in the marketplace are Android-based, and these APIs are deliberate to be in Chromium-based browsers which can be found on Android.
If a browser on a foldable machine doesn’t help these options, you possibly can both use the polyfill or guarantee your web site nonetheless renders properly on a small single display screen, because the person has the flexibleness to decide on tips on how to show an internet site on a dual-screen machine. They will span an internet site throughout each shows, or they will select to have it span throughout one show, and in the event that they select the latter, it can show as it could on a pill or cellphone with a single display screen. Even when your web site doesn’t have a dual-screen implementation, customers can nonetheless go for the one show view. The twin-screen APIs supply a strategy to progressively improve the expertise for customers who’ve the units.
Closing
Twin-screen units are simply the subsequent evolution in responsive design. When you’ve got a PWA or web site, the APIs obtainable make integrating into your present code base seamless. There are additionally different methods to construct apps for dual-screen units, which you’ll be able to take a look at on the Floor Duo documentation. It’s an thrilling time for format on the net, and twin screens present a chance to get much more inventive.
Additional Assets
“Twin-Display screen Net Experiences,” Microsoft
“Horizontal Viewport Segments: The horizontal-viewport-segments Function,” Media Queries Stage 5, W3C Working Draft (Dec. 2021)
“Viewport Section Variables,” CSS Atmosphere Variables Module Stage 1, Editor’s Draft (Aug. 2021)
“Visible Viewport API,” Draft Group Group Report (Feb. 2022)
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!