\n Today\u2019s post discusses the APIs you can use to adapt your content to dual-screen devices using either CSS or JavaScript.\n<\/p>\n
Dual-screen CSS<\/h2>\n
\n The CSS support for Surface Duo is a combination of dual-screen-aware media queries and environment variables:\n<\/p>\n
- \n
- Media queries<\/strong> – the dual-screen-aware media queries define styles that are only applied to the page when being viewed on a specific device layout, such as two viewports side-by-side as in the screenshot below.\n <\/li>\n
- Environment variables<\/strong> \u2013 the dual-screen-aware environment variables describe the dimensions of each viewport, when more than one viewport is present. These values can be used to position elements relative to the hinge or fold between the viewports.\n <\/li>\n<\/ul>\n
This example<\/a> shows a real-world implementation of the colored boxes absolutely positioned<\/a> section of the Foldables explainer<\/a>:\n<\/p>\n
\n
![\"Surface](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/03\/graphical-user-interface-text-application-white.png\")
Figure 1: Colored boxes example in Microsoft Edge on Surface Duo 2<\/em>\n<\/p>\nDual-screen media queries<\/h3>\n
\n CSS media queries provide a way to selectively apply styles when the browser or device matches one or more rules. Examples include specifying styles only for the print media type, or styles that apply at different viewport widths. The dual-screen support available in Microsoft Edge extends this capability to detecting how many<\/em> viewport segments exist, so that styles can be applied only when viewing on a dual-screen device.\n<\/p>\n
\n There are two media expressions available \u2013 one that applies to the viewports side-by-side and another when the viewports are vertically arranged. This can be helpful when implementing different dual-screen UX patterns<\/a> based on the device\u2019s posture \u2013 for example you might wish to create a book-like reading experience when the screens are side-by-side, but treat both screens as endless scrolling content in the vertical posture.\n<\/p>\n
\n The CSS syntax for these device postures matches the number of segments in a horizontal or vertical direction:\n<\/p>\n
@media (horizontal-viewport-segments:2) { \r\n \/* styles for side-by-side *\/ \r\n}\r\n@media (vertical-viewport-segments:2) { \r\n \/* styles for vertical layout *\/ \r\n}<\/pre>\n\n
![\"Two](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/03\/graphical-user-interface-description-automaticall.png\")
\n The expressions can be combined, such as this CSS which detects a viewport that has exactly<\/em> two segments that are side by side (although no currently shipping devices require this level of specificity):\n<\/p>\n
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {\r\n \/* styles for side-by-side *\/ \r\n}<\/pre>\n\n Notice that when Surface Duo is vertically oriented, the top viewport segment (A) is smaller than (B) because of the address bar. You should never assume that the two segments are the same size, but instead use the environment variables explained below to determine the size of each area.\n<\/p>\n
Dual-screen environment variables<\/h2>\n
\n Once you\u2019ve decided to customize the page layout based on multiple viewport segments, you\u2019ll want to position elements to adapt to the device\u2019s orientation and hinge position. The dual-screen web support includes size additional environment variables that you can incorporate into your style sheets, which describe the dimensions of each viewport segment:\n<\/p>\n
env(viewport-segment-width x y)\r\nenv(viewport-segment-height x y)\r\nenv(viewport-segment-top x y)\r\nenv(viewport-segment-left x y)\r\nenv(viewport-segment-bottom x y)\r\nenv(viewport-segment-right x y)<\/pre>\n
\n The values are indexed, with the \u2018top left\u2019 viewport in any orientation always being
0 0<\/code>. Figure 3 illustrates the correct indexes for the viewports in each device posture.\n<\/p>\n\n
![\"Stylized](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/03\/stylized-surface-duo-device-mockups-showing-the-co.png\")
\n<\/p>\nFigure 3: viewport-segment environment variables<\/em>\n<\/p>\n
\n These values are only available when used inside a viewport segments expression, but you can use the environment variable\u2019s fallback parameter to set the default:\n<\/p>\n
env(viewport-segment-width 0 0 300px)\r\n<\/pre>\n
JavaScript<\/h2>\n
\n The dual-screen JavaScript support is exposed via a new window property
visualViewport<\/code>, and itssegments<\/code> property. Whensegments<\/code> is notnull<\/code> it will return an array of rectangles that describes the bounds of the two screens, which you can use to align elements on the page and avoid the obscured hinge area on some devices. This simple function shows the segment values in the console:\n<\/p>\n\r\nfunction printWindowSegments() {\r\n const screens = window.visualViewport.segments;\r\n if( segments && segments.length > 1 ) { \/\/ device has a hinge or fold\r\n console.table(screens);\r\n }\r\n}\r\nwindow.addEventListener(\"resize\", () => { \/\/ recalculate when size changes (could be spanned or unspanned)\r\n printWindowSegments();\r\n});\r\nprintWindowSegments();<\/pre>\n\n The JavaScript
console.table<\/code> method makes it easy to visualize the value of thesegments<\/code> property, and also to see the difference between testing on a Surface Duo 2 device<\/a> where the address bar reduces the size of the first viewport and developer tools in the browser<\/a> which does not simulate the address bar, and uses the dimensions of the original Surface Duo, as shown in Figure 4.\n<\/p>\n\n
![\"Screen](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/03\/table-description-automatically-generated.png\")
Figure 4: JavaScript console output (device versus devtools)<\/em>\n<\/p>\nLearn more at An Event Apart<\/h2>\n
\n Join Stephane Stimac the An Event Apart<\/em> online conference to learn more about Design and Development Considerations for Dual Screen Devices<\/a> on Monday April 18th<\/sup>.\n<\/p>\n
\n You can register online for the Spring Summit<\/a> that runs from April 18th<\/sup> \u2013 20th<\/sup>.\n<\/p>\n
Resources and feedback<\/h2>\n
\n These dual-screen capabilities have also been exposed in Angular<\/a> and React<\/a>.\n<\/p>\n
\n Check out the Surface Duo developer documentation<\/a> and past blog posts<\/a> for links and details on all our samples. \n<\/p>\n
\n If you have any questions, or would like to tell us about your dual-screen websites or PWAs, use the feedback forum<\/a> or message us on Twitter @surfaceduodev<\/a>.\u00a0\n<\/p>\n
- Environment variables<\/strong> \u2013 the dual-screen-aware environment variables describe the dimensions of each viewport, when more than one viewport is present. These values can be used to position elements relative to the hinge or fold between the viewports.\n <\/li>\n<\/ul>\n