簡(jiǎn)介：可折疊Web即將到來，我們應(yīng)該去思考可折疊Web可能會(huì)給我們帶來什么變化，如果這一天真的到來，我們的技術(shù)能否支持該設(shè)備？

作者 | 大漠

可折疊Web的說法是可折疊設(shè)備帶來的。可折疊設(shè)備形式多樣，從筆記本電腦到手機(jī)，再到新奇的雙屏幕混合設(shè)備。對(duì)于這類新發(fā)明并沒有一個(gè)全面的定義，但大多數(shù)都可以歸為兩類。“可折疊”是指屏幕可以折疊的設(shè)備（比如華為Mate X，三星Galaxy Z Flip）；而“雙屏”設(shè)備的屏幕是分開的，但也可以以獨(dú)特的方式一起工作，以靈活的形式提供生產(chǎn)力（比如，微軟的Surface Neo和Surface Duo）。當(dāng)涉及到Web設(shè)計(jì)時(shí)，這兩種類型可能會(huì)遵循類似的規(guī)則。如果這項(xiàng)技術(shù)能大獲成功，那么Web設(shè)計(jì)將面臨十年來最大的變革。這對(duì)于我們Web開發(fā)者而言，也將會(huì)開啟新的旅程。

聽起來就很令人興奮，但這到底意味著什么呢？可折疊Web將帶來新的挑戰(zhàn)，新的機(jī)遇，而且很可能還會(huì)帶來新的概念。互聯(lián)網(wǎng)可能也會(huì)經(jīng)歷自智能手機(jī)以來最大的變革。你可能會(huì)認(rèn)為這是一種炒作，但事實(shí)上這樣的一天已經(jīng)離我們不是太遠(yuǎn)。記得在去年這個(gè)時(shí)候，有些移動(dòng)品牌商，比如華為，三星都推出可折疊的硬件設(shè)備，而微軟，蘋果等公司在幕后的努力也不遜色。可以說可折疊Web即將到來。我們真的應(yīng)該去思考可折疊Web可能會(huì)給我?guī)硎裁醋兓?#xff1f;如果這一天真的到來，我們的技術(shù)是否能支持該設(shè)備。簡(jiǎn)單地說，我們開發(fā)的Web頁面能不能在可折疊設(shè)備和雙屏幕上完美的運(yùn)行。

可折疊和雙屏設(shè)備

可折疊設(shè)備采用的是一種柔性屏幕技術(shù)，該技術(shù)的研究始于20世紀(jì)70年代，但直到世紀(jì)之交才得到真正的發(fā)展。特別是在去年，得到了爆發(fā)式的發(fā)展——在市場(chǎng)上能看到一些可折疊設(shè)備終端。比如三星Galaxy Z Flip手機(jī)，模仿的是老式的翻蓋手機(jī)：

比如三星的Galaxy Fold手機(jī)，在折疊狀態(tài)是一個(gè)小屏幕，展開狀態(tài)是一個(gè)寬屏幕：

比如華為Mate X，屏幕是包裹在手機(jī)外面的：

還有很多像電子書一樣，當(dāng)設(shè)備完全打開時(shí)，內(nèi)部的兩個(gè)顯示屏?xí)隙橐弧ＭǔＴ谕饷嬗幸粋€(gè)獨(dú)立的小屏幕，這樣用戶在使用的時(shí)候就不用打開它。

雙屏幕設(shè)備是具有兩個(gè)對(duì)稱屏幕的便攜式設(shè)備，以獨(dú)特的方式一起工作，以靈活的形式提供生產(chǎn)力。比如像微軟的Surface Neo和Surface Duo這樣的雙屏幕設(shè)備，人們可以比以往任何時(shí)間都更快地完成工作。如果你使用過Surface Neo這樣的雙屏幕設(shè)備，你可以在一個(gè)屏幕上做筆記，在傳輸過程中在另一個(gè)屏幕上查看完整的項(xiàng)目建議書：

盡管現(xiàn)在市場(chǎng)上有不同的折疊屏，雙屏幕設(shè)備，而且還會(huì)有更多的類似設(shè)備出現(xiàn)，但我們相信為這些設(shè)備設(shè)計(jì)應(yīng)用程序會(huì)有一個(gè)共同的方法。我們希望這將幫助你的應(yīng)用程序能跑在更多的設(shè)備上，而不需要為不同的設(shè)備做特殊的設(shè)計(jì)和處理。

換句話說，在可折疊屏或雙屏幕的設(shè)備上，用戶可以做更多的事情，比如說讓屏幕分屏，可以同時(shí)打開多個(gè)應(yīng)用程序：

也可以打開同一個(gè)應(yīng)用，在應(yīng)用中分屏，打開不同的頁面，比如：

像上圖這樣，應(yīng)用程序在兩個(gè)屏幕上顯示，就是所謂的跨屏布局。默認(rèn)情況下，該應(yīng)用程序?qū)⒈憩F(xiàn)得好像它是在一個(gè)更大的屏幕上顯示。你也可以改變你現(xiàn)有的應(yīng)用程序布局來適應(yīng)兩個(gè)屏幕之間的縫隙，或者你可以更進(jìn)一步，允分的利用雙屏幕設(shè)備而專門創(chuàng)建不同的布局控件。比如iPad版本的手淘，就可以分屏展示：

新的 Web 標(biāo)準(zhǔn)、新的體驗(yàn)和新的問題

可折疊和雙屏幕設(shè)備正在出現(xiàn)。這已經(jīng)不是概念，也不是炒作。這更不是重點(diǎn)。重點(diǎn)是：

可折疊和雙屏幕這項(xiàng)技術(shù)將如何影響Web開發(fā)人員、用戶體驗(yàn)設(shè)計(jì)師以及其他以提供高質(zhì)量瀏覽體驗(yàn)為業(yè)務(wù)的人。

首先可折疊和雙屏幕會(huì)給視覺設(shè)計(jì)師在做設(shè)計(jì)的時(shí)候帶來很大的變化。

整個(gè)可折疊的概念是基于你可以把你的手機(jī)變成平板電腦的想法。市場(chǎng)上大多數(shù)平板電腦的屏幕寬高比都是 4:3，所以手機(jī)和平板電腦的混合也應(yīng)該是4:3。這使用折疊設(shè)備達(dá)到3:2。而這些比率都不能保證16:9或18:9的真實(shí)視頻體驗(yàn)。其中4:3的寬高比更適合在各種文本和圖形編輯器中執(zhí)行任務(wù)和工作，比如iPad，但它需要更大的分辨率，這是可折疊設(shè)備無法做到的。這使得大多數(shù)可折疊手機(jī)處于一個(gè)模糊地帶，給人用戶的體驗(yàn)就會(huì)變得很糟糕，這也是因?yàn)樵趥鹘y(tǒng)手機(jī)中是無法達(dá)到16:9的比例。

為了讓可折疊手機(jī)成為一種有用的媒體設(shè)備，它必須轉(zhuǎn)換成16:9或18:9的設(shè)備，然后再折疊成8:9或9:9 —— 基本上就是一個(gè)正方形。@Nathan Cunn通過計(jì)算得出結(jié)論，折疊手機(jī)的完美寬高比應(yīng)該是其寬度的1.4倍。

這也將會(huì)是iPhone折疊屏將會(huì)采用的一種寬高比例：

除此之外，不管是可折疊設(shè)備還是雙屏幕設(shè)備，最大的特征就是屏幕變大了，在展開的狀態(tài)下和平板一樣了。這樣一來，可用的空間就變大了。

可折疊和多屏設(shè)備打破了移動(dòng)設(shè)備（手機(jī)）可用空間小的束縛！

空間大了，能放置的內(nèi)容就多了，如果設(shè)計(jì)還是按著以前的思路，直接拉伸平滿全屏，就過于浪費(fèi)了。面對(duì)這樣的場(chǎng)景，除了響應(yīng)式Web設(shè)計(jì)能幫助我們更好的利用可用空間之外，還可以參照淘寶設(shè)計(jì)提出的一個(gè)概念：

讓你的內(nèi)容像水一樣的流動(dòng)（“Content is like water”）

用一張圖來描述：

有關(guān)于這方面更詳細(xì)的介紹，可以關(guān)注淘寶設(shè)計(jì)微信公眾號(hào)。

你可以搜索“可折疊”關(guān)鍵詞，能找到一些這方面的文章，比如：

• 不要驚訝，折疊屏就應(yīng)該這樣設(shè)計(jì)！
• 獨(dú)家揭秘淘寶折疊屏設(shè)計(jì)內(nèi)幕與適配開發(fā)
• 跨端設(shè)計(jì)又雙叒來了，只是響應(yīng)式換個(gè)名字？

對(duì)于雙屏幕給設(shè)計(jì)帶來的變化，或者說設(shè)計(jì)應(yīng)該要注意的細(xì)節(jié)，可以閱讀微軟官方有關(guān)于雙屏幕的介紹：《Introduction to dual-screen devices》。

另外，折疊屏幕還會(huì)帶來一些其他的設(shè)計(jì)和體驗(yàn)變化。

單（雙）手移動(dòng)設(shè)計(jì)

隨著狀態(tài)的改變（這里的狀態(tài)是折疊和展開狀態(tài)，單屏和多屏狀態(tài)），整個(gè)體驗(yàn)本身也隨之改變。目前大多數(shù)用戶都習(xí)慣用一只手操作移動(dòng)設(shè)備（手機(jī)），而展開狀態(tài)，就像iPad了，這個(gè)時(shí)候需要兩只手來操作設(shè)備（或應(yīng)用）。

手機(jī)操作 vs 平板操作

屏幕連續(xù)性和間隔

可折疊設(shè)備和多屏幕設(shè)備有著明顯的區(qū)別。

可折疊設(shè)備在展開狀態(tài)時(shí)，它的屏幕是連續(xù)性的，我們?cè)谠O(shè)計(jì)的體驗(yàn)應(yīng)該無縫地轉(zhuǎn)移到全屏上。

針對(duì)這樣的情景，如果只是粗暴的放大到全屏，那么布局上不會(huì)有太多的變化，只不過對(duì)于Web中的部分對(duì)象會(huì)變得模糊，比如圖像。當(dāng)然，也可以考慮設(shè)計(jì)上做差異性的處理，比如說做分屏設(shè)計(jì)：

對(duì)于多屏幕設(shè)備，有可能屏幕不是連續(xù)性的，比如微軟的Surface Neo和Surface Duo，屏幕之間就有一個(gè)間隙：

在設(shè)計(jì)和布局的時(shí)候，就需要避免Web對(duì)象處在兩個(gè)屏幕的間隙之間，比如：

或者：

多窗口，多應(yīng)用

前面提到過，折疊屏和多屏幕最大的特征之一，就讓我們有更多的空間可利用。這樣對(duì)于用戶來說，對(duì)于處理多任務(wù)更友好，能同時(shí)做更多的事情。因此，我們應(yīng)該始終考慮用戶可能會(huì)同時(shí)運(yùn)行多個(gè)App應(yīng)用。比如說，一邊查看日歷，一邊查看地圖，一邊看新聞：

除了同時(shí)打開多個(gè)App應(yīng)用之外，還可以在同一個(gè)App中，分屏做不同的事情，比如，一邊看直播，一邊逛淘寶：

折疊屏和多屏幕除了給設(shè)計(jì)師帶來新的挑戰(zhàn)之外，給Web開發(fā)者也帶來相應(yīng)的挑戰(zhàn)。在去年華為Mate X出來的時(shí)候，有幸參與在Mate X做一些Web端的適配處理。主要處理H5的應(yīng)用完美適配折疊屏設(shè)備。

由于相關(guān)H5業(yè)務(wù)采用的都是視窗單位vw（我常稱該方案為vw-layout），能較好的讓相應(yīng)的H5業(yè)務(wù)適配折疊屏展開狀態(tài)，但也存在一些相應(yīng)的問題，最為突出的是圖像變得模糊：

當(dāng)然也嘗試著采用響應(yīng)式Web設(shè)計(jì)來做不同的布局處理：

雖然該方式可以讓我們的H5應(yīng)用最大化的利用折疊屏可用空間，但也存在一定的缺陷。因此在《聊聊安卓折疊屏給交互設(shè)計(jì)和開發(fā)帶來的變化》一文中提出相應(yīng)的概念：

處理折疊屏?xí)r，我們應(yīng)該像一些帶有劉海設(shè)備（比如iPhone X）一樣，具有獨(dú)特的檢測(cè)特性來檢測(cè)折疊設(shè)備或多屏幕設(shè)備。

值得慶幸的是這一年來，在這方面有了明顯的變化，尤其是微軟公司的團(tuán)隊(duì)對(duì)可折疊技術(shù)的探究和討論非常的積極。在今年2月份，三位微軟開發(fā)人員@Bogdan Brinza、@Daniel Libby和@Zouhir Chahoud發(fā)表了一篇文章，解釋如何使用JavaScript API和CSS 媒體查詢來處理可折疊和多屏幕設(shè)備的布局。

該文檔提出兩個(gè)概念：用于雙屏幕布局的CSS 和 窗口段枚舉的JavaScript API。它的宗旨是作為討論折疊屏和多屏幕在Web開發(fā)中技術(shù)標(biāo)準(zhǔn)。即：以可折疊和雙屏幕設(shè)備為目標(biāo)的Web開發(fā)人員能夠在跨多個(gè)顯示區(qū)域的窗口中有效的對(duì)Web應(yīng)用進(jìn)行布局。

未來處理可折疊或多屏幕的 Web 技術(shù)

從@Bogdan Brinza、@Daniel Libby和@Zouhir Chahoud三位開發(fā)者在Github上發(fā)表的文檔《Web Platform Primitives for Enlightened Experiences on Foldable Devices》來看。處理可折疊和多屏幕設(shè)備的Web布局主要由兩部分特性組成，其一是CSS的媒體查詢特性，其二是JavaScript API。

接下來，我們主要圍繞著這兩個(gè)部分來展開。

用于構(gòu)建雙屏幕布局的 CSS 特性

特別聲明：用于雙屏幕布局的CSS還處于W3C規(guī)范的草案當(dāng)中，一切皆有可能會(huì)變。

@Brinza、@Libby和@Chahoud提出了一個(gè)CSS特性，即媒體特性，它可以確定網(wǎng)站是否跨越兩個(gè)相鄰的顯示區(qū)域，以及這兩個(gè)相鄰顯示區(qū)域的配置。相應(yīng)的還提出了另一個(gè)特性，即環(huán)境變量（指的是用戶代理定義的環(huán)境變量），它將幫助Web開發(fā)人員以CSS像素計(jì)算每個(gè)屏幕區(qū)域的大小。

為什么要提出新的CSS特性

當(dāng)瀏覽器窗口跨越設(shè)備折疊時(shí)，告訴Web開發(fā)者折疊方向和顯示邊界可以幫助他們開發(fā)出來具有較好體驗(yàn)的Web應(yīng)用。這里快速概述可能會(huì)出現(xiàn)的模式。

將更大屏幕的UI模式帶到更小的便攜設(shè)備

由于屏幕尺寸的限制，傳統(tǒng)的便攜式觸摸設(shè)備在很大程度上依賴于“疊加視圖”，比如點(diǎn)擊收件箱列表中的一封郵件，就會(huì)導(dǎo)致整個(gè)收件箱列表視圖被選中的郵件內(nèi)容視圖所取代。這種行為通常會(huì)創(chuàng)建額外的操作步驟；而在更大屏幕的設(shè)備上將會(huì)有一個(gè)更自然的配置，郵件收件箱列表視圖和郵件內(nèi)容視圖是并排的。

當(dāng)然，這種重新創(chuàng)造的模式并不是唯一的解決方案，只不過可折疊屏和多屏幕設(shè)備相對(duì)于傳統(tǒng)的便攜觸摸式移動(dòng)設(shè)備來說多了一個(gè)顯示器，相當(dāng)于增加一個(gè)屏幕空間，這樣一來可以為Web開發(fā)者和設(shè)計(jì)師提供獨(dú)特的機(jī)會(huì)來創(chuàng)造新的體驗(yàn)。

輕松改進(jìn)現(xiàn)有的Web應(yīng)用和UI組件

Web開發(fā)人員可能不想為這類設(shè)備引入主要的UI更改，而只想簡(jiǎn)單地移動(dòng)一些組件。在下面的示例中，對(duì)于模態(tài)對(duì)話框（Modal）避免設(shè)備折疊更有意義（無論可折疊設(shè)備是無縫的還是有間隙的），并允許Web開發(fā)人員逐步增強(qiáng)他們的站點(diǎn)，提供更好的體驗(yàn)。

也正因?yàn)檫@些原因，提出了相應(yīng)的CSS特性和設(shè)計(jì)原則。

CSS媒體特性：spanning

提出一個(gè)新的媒體特性：spanning，該特性可用于檢測(cè)瀏覽器窗口是否跨越多個(gè)顯示區(qū)域。

spanning特性主要有三個(gè)值：

• single-fold-vertical：屏幕是水平的，布局視圖跨越單個(gè)折疊（兩個(gè)屏幕）并且折疊姿勢(shì)是垂直時(shí)（分左右兩邊），這個(gè)值是匹配的
• single-fold-horizontal：屏幕是垂直的，布局視圖跨越單個(gè)折疊（兩個(gè)屏幕）并且折疊姿勢(shì)是水平時(shí)（分上下），這個(gè)值是匹配的
• none：描述瀏覽器窗口不處于跨越模式時(shí)的狀態(tài)

識(shí)別折疊或多屏設(shè)備的CSS環(huán)境變量

這個(gè)有點(diǎn)類似于劉海設(shè)備一樣，通過env()函數(shù)來識(shí)別環(huán)境變量，即識(shí)別安全區(qū)域：

• env(safe-area-inset-top)：在Viewport頂部的安全區(qū)域內(nèi)設(shè)置量（CSS像素）
• env(safe-area-inset-bottom)：在Viewport底部的安全區(qū)域內(nèi)設(shè)置量（CSS像素）
• env(safe-area-inset-left)：在Viewport左邊的安全區(qū)域內(nèi)設(shè)置量（CSS像素）
• env(safe-area-inset-right)：在Viewport右邊的安全區(qū)域內(nèi)設(shè)置量（CSS像素）

這份建議預(yù)定義了幾個(gè)可識(shí)別折疊或多屏設(shè)備的CSS環(huán)境變量：fold-top、fold-left、fold-width和fold-height。

Web開發(fā)人員可以利用這些變量來計(jì)算橫屏和豎屏的每個(gè)屏幕片段大小。

注意，這些CSS環(huán)境變量的值是CSS像素，并且是相對(duì)于布局視圖的（即在客戶端坐標(biāo)中，由CSSOM視圖定義）。當(dāng)不處于跨越狀態(tài)時(shí)，這些值將被視為不存在，則會(huì)取env()函數(shù)的回退值。

來看一個(gè)簡(jiǎn)單的示例：一個(gè)地圖應(yīng)用程序，在一個(gè)屏幕上顯示地圖，在另一個(gè)屏幕上顯示搜索結(jié)果。如下圖所示：

如果用CSS代碼來實(shí)現(xiàn)的話，大致如下：

@media (spanning: single-fold-vertical) { body {flex-direction: row;}.map {flex: 1 1 env(fold-left)}.locations-list {flex: 1;} }

spanning 的 Polyfill

到目前為止，新增的CSS媒體特性spanning和相應(yīng)的環(huán)境變量都還處于草案的討論階，但如果你要嘗試著在折疊設(shè)備或多屏幕設(shè)備上使用該特性的話，可以使用@darktears 提供的一個(gè)Polyfill。

這個(gè)Polyfill的使用很簡(jiǎn)單，你可以使用NPM將這個(gè)Polyfill加載到你的項(xiàng)目中：

npm install --save spanning-css-polyfill

安裝完之后，通過<script>將對(duì)應(yīng)的spanning-css-polyfill.js引入到項(xiàng)目中：

<script type="module" src="/path/to/modules/spanning-css-polyfill.js"></script>

也可以使用import的方式引入：

import "/path/to/modules/spanning-css-polyfill/spanning-css-polyfill.js";

這樣你就可以在CSS中使用spanning這個(gè)新媒體查詢特性和CSS環(huán)境變量fold-top、fold-left、fold-width和fold-height。

當(dāng)然，你還可以手動(dòng)改變顯示（display）相關(guān)的配置。比如，通過導(dǎo)入FoldablesFeature對(duì)象：

import { FoldablesFeature } from '/path/to/modules/spanning-css-polyfill/spanning-css-polyfill.js';

可以通過FoldablesFeature對(duì)象來更新像spanning、foldSize和browserShellSize等值。你也可以訂閱change事件，以便spanning媒體查詢特性或環(huán)境變量發(fā)生變更時(shí)得到相應(yīng)的通知。

import { FoldablesFeature } from '/path/to/modules/spanning-css-polyfill/spanning-css-polyfill.js';const foldablesFeat = new FoldablesFeature;// Add an event listener. foldablesFeat.onchange = () => console.log("change");// Add as many event listeners as you want. foldablesFeat.addEventListener('change', () => console.log("change"));// Change a single value; results in one update (one 'change' event firing). foldablesFeat.foldSize = 20;// Change multiple values by assignment; results in one update. Object.assign(foldablesFeat, { foldSize: 50, spanning: "none"});// Change multiple values in one scope; results in one update (function() { foldablesFeat.foldSize = 100; foldablesFeat = "single-fold-horizontal" })();

有關(guān)于spanning更詳細(xì)的使用，可以查看Github上的相關(guān)教程。

枚舉窗口片段的 JavaScript API

特別聲明，枚舉窗口片段的JavaScript API已移到W3C第二屏幕社區(qū)組。相關(guān)的解釋、問題和評(píng)論，可以參閱GitHub的webscreens/window-segments倉庫。

這里提出了一個(gè)窗口片段的新概念，它表示位于單獨(dú)（相鄰）顯示上的窗口區(qū)域（及其尺寸）。窗口片段尺寸以CSS像素表示，并允許Web開發(fā)者通過JavaScript API對(duì)窗口片段進(jìn)行枚舉，在相應(yīng)的窗口片段上放置獨(dú)立內(nèi)容。

這個(gè)建議主要針對(duì)響應(yīng)式場(chǎng)景，在這種情況下，Web應(yīng)用程序希望利用跨越多個(gè)顯示的優(yōu)勢(shì)，通過用戶、窗口管理器將其置于該狀態(tài)。它不適合將內(nèi)容預(yù)先放置在各種可用顯示的單獨(dú)頂級(jí)瀏覽器上下文的情況（這屬于Window Placement API和Presentation API）。請(qǐng)注意，使用枚舉窗口片段的API和Web現(xiàn)有的特性，可以使用JavaScript來編寫交叉顯示和窗口的矩形，同時(shí)考慮devicePixelRatio來，計(jì)算橫跨多個(gè)顯示的窗口區(qū)域。不過，這個(gè)并不能正確的處理未來設(shè)備形式中存在的極端情況，因此，這個(gè)提議試圖解決Web開發(fā)人員針對(duì)或考慮顯示內(nèi)容屏幕作為一個(gè)實(shí)際的起點(diǎn)。

簡(jiǎn)單地來說，Web開發(fā)者可以使用getWindowSegments()來獲取一個(gè)DOMRects數(shù)組，然后根據(jù)每個(gè)窗口片段返回的數(shù)據(jù)，開發(fā)人員能夠推斷出可用鏈接（Hinge）的數(shù)量以及其方向。

用戶可以在任何時(shí)候?qū)g覽器窗口脫離跨越模式，并將其放在某個(gè)屏幕上，反之亦然，在這種情況下，將觸發(fā)窗口resize事件，從而可以查詢并獲得可用屏幕段的數(shù)量。

比如我們上面提到的示例：

如果使用JavaScript來解決的話，可以像下面這樣：

const screenSegments = window.getWindowSegments();if( screenSegments.length > 1 ) {// 現(xiàn)在我們知道這個(gè)設(shè)備是可折疊（可多屏幕）的// 建議測(cè)試 screenSegments[0].width === screenSegments[1].width // 可以更新CSS類，實(shí)現(xiàn)不同的布局效果document.body.classList.add('is-foldable');document.querySelector('.map').classList.add('flex-one-half');document.querySelector('.locations-list').classList.add('flex-one-half'); }

我們?cè)賮砜戳硪粋€(gè)示例，當(dāng)窗口的resize事件和spanning狀態(tài)發(fā)現(xiàn)變化時(shí)處理方案。

先看CSS的解決方案：

@media (spanning: none) and (max-width: 728px) { body {flex-direction: column;}.map {flex: 0 0 300px;}.locations-list {flex: 1;} }

如果使用JavaScript可以這樣：

window.onresize = function() {const segments = window.getWindowSegments();console.log(segments.length) // 1if( screenSegments.length > 1 ) {document.body.classList.add('is-foldable');document.querySelector('.map').classList.add('flex-one-half');document.querySelector('.locations-list').classList.add('flex-one-half');} }

實(shí)戰(zhàn)：多屏幕布局

最后我們來看實(shí)際案例。

你可能在手上沒有折疊屏或多屏幕的設(shè)備，有可能無法看到實(shí)際效果。但可以使用一款基于Web的模擬器，這款模擬器可以模擬微軟 Surface Duo 和 Surface Neo兩款分屏設(shè)備：

embed: foldable-web-27.mp4

@kenchris 在GitHub上spanning-css-polyfill提供了幾個(gè)Demo，我們來看最簡(jiǎn)單的basic中的index.html。

HTMl部分很簡(jiǎn)單（這個(gè)Demo本身就很簡(jiǎn)單）：

<div class="wrapper"><div class="col1"></div><div class="col2"></div> </div>

在</body>前加載了一個(gè).js文件，根據(jù)CSS Spanning Polyfill提供的一些方法，處理一些全局樣式，甚至可以根據(jù)JavaScript的API來構(gòu)建CSS方面的樣式。

<script type="module" src="../../src/index.js"></script>

index.js對(duì)應(yīng)的詳細(xì)代碼可以點(diǎn)擊這里查閱。

接著看CSS部分。在CSS中使用媒體查詢特性：

/* 普通設(shè)備下對(duì)應(yīng)的CSS */ .wrapper {display: flex;height: 100%;width: 100%; }.col1 {flex: 0 0 200px;background-color: lightgray;transition: background-color .2s linear; }.col2 {flex: 1;background-color: papayawhip;transition: background-color .2s linear; }.col1:before {content: "not spanning"; }.col2:before {content: "not spanning"; }

不是分屏（或折疊）設(shè)備中，看到的效果像下面這樣：

在水平方向分屏狀態(tài)（即spanning取值為single-fold-vertical）下的CSS:

@media (spanning: single-fold-vertical) {.col1 {flex: 0 0 env(fold-left);margin-right: env(fold-width);background-color: steelblue;}.col2 {background-color: yellow;}.col1:before {content: "spanning single-fold-vertical";}.col2:before {content: "spanning single-fold-vertical";} }

注意，示例中還使用了CSS的env()函數(shù)，調(diào)用了CSS環(huán)境變量fold-left和fold-width。這個(gè)時(shí)候看到的效果如下：

當(dāng)你把瀏覽器模式（Browser Mode）切換為“Left”或“Right”時(shí)，看到的效果如下：

上圖是Surface Duo模擬器，Browser Mode為L(zhǎng)eft狀態(tài)效果

上圖是Surface Duo模擬器，Browser Mode為Right狀態(tài)效果

接下來再來設(shè)備垂直方向分屏（即spanning取值為single-fold-horizontal）的布局樣式：

@media (spanning: single-fold-horizontal) {.wrapper {flex-direction: column;}.col1 {flex: 0 0 env(fold-top);margin-bottom: env(fold-height);background-color: pink;}.col2 {background-color: seagreen;}.col1:before {content: "spanning single-fold-horizontal";}.col2:before {content: "spanning single-fold-horizontal";} }

同樣的，如果你把模擬器的瀏覽器模式切換到"Top"或"Bottom"狀態(tài)下，看到的效果也會(huì)不一樣：

最后，你還可以在spanning:none狀態(tài)下設(shè)置相應(yīng)的CSS：

@media (spanning: none) {.col1:before {content: "spanning:none";}.col2:before {content: "spanning:none";} }

上面是一個(gè)較為簡(jiǎn)單的示例。那么接下來，我們?cè)谏厦娴幕A(chǔ)上把頁面做得稍微復(fù)雜一點(diǎn)：

<!-- HTML --> <ul class="card__container"><li class="card"><div class="card__object"><img src="//source.unsplash.com/300x300?01" alt="Psychopomp"></div><div class="card__body"><h4 class="card__title">Psychopomp</h4><p>Japanese Breakfast</p></div></li><!-- ... --> </ul>

按照上面的示例，在媒體特性之外，給普通設(shè)備添加樣式（也可以說是全局樣式）：

/* 布局關(guān)鍵樣式 */ body {width: 100vw;min-height: 100vh;margin: 0;padding: 2vh; }.card__container {gap: 2vmin;display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));grid-auto-flow: dense; }.card:nth-child(1) {grid-column: span 2; }.card:nth-child(6) {grid-column: span 3; }

普通設(shè)備（非折疊和分屏）下效果點(diǎn)擊這里查看。

拖動(dòng)瀏覽器時(shí)改變視窗大小，看到的效果如下：

在不對(duì)spanning媒體特性下做任何樣式處理時(shí)，在分屏狀態(tài)下看到的效果如下：

同樣的，先對(duì)spanning: single-fold-vertical做樣式上的處理：

@media (spanning: single-fold-vertical) {.card__container {gap: env(fold-width);grid-template-columns: repeat(auto-fit, minmax(calc((env(fold-left) - env(fold-width) - 4vh) / 2), 1fr));}.card:nth-child(6) {grid-column: span 2;} }

這個(gè)時(shí)候水平分屏狀態(tài)下的效果如下：

接著來看垂直方向的分屏狀態(tài)下的效果，先來看未處理時(shí)的效果：

接下來在spanning: single-fold-horizontal媒體特性下做一些布局上的處理：

@media (spanning: single-fold-horizontal) {.card__container {gap: 20px;grid-template-columns: 1fr;grid-template-rows: calc(env(fold-height) - 4vh);}.card__object {height: 250px;}.card:nth-child(1) {grid-column: span 1;}.card:nth-child(6) {grid-column: span 1;} }

看到的效果如下：

實(shí)際操作的時(shí)候，應(yīng)該根據(jù)自己的使用場(chǎng)景，然后對(duì)應(yīng)的媒體查詢特性中配合CSS本地環(huán)境使用，實(shí)現(xiàn)不同的效果。

有關(guān)于這方面的Demo，還可以查閱：

• CSS Spanning media feature polyfill & example
• Window Segments Enumeration API polyfill & example

小結(jié)

可折疊Web的出現(xiàn)，讓移動(dòng)優(yōu)先的設(shè)計(jì)變得更加復(fù)雜，但也更加令人興奮。可折疊Web可能是第一次手持設(shè)備感到空間的擴(kuò)展而不是限制。對(duì)于一些Web應(yīng)用或Web頁面來說，需要做一定的調(diào)整，而對(duì)于另一些Web應(yīng)用來說，則意味著需要大規(guī)模的重新設(shè)計(jì)。這個(gè)范圍取決于開發(fā)人員的創(chuàng)新。

參考資料

• Web Platform Primitives for Enlightened Experiences on Foldable Devices
• Window Segments Enumeration API
• CSS Foldable Display polyfill
• 分屏模擬器

---

關(guān)注「Alibaba F2E」
把握阿里巴巴前端新動(dòng)向

原文鏈接：https://developer.aliyun.com/article/770390?

版權(quán)聲明：本文內(nèi)容由阿里云實(shí)名注冊(cè)用戶自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，阿里云開發(fā)者社區(qū)不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。具體規(guī)則請(qǐng)查看《阿里云開發(fā)者社區(qū)用戶服務(wù)協(xié)議》和《阿里云開發(fā)者社區(qū)知識(shí)產(chǎn)權(quán)保護(hù)指引》。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容，填寫侵權(quán)投訴表單進(jìn)行舉報(bào)，一經(jīng)查實(shí)，本社區(qū)將立刻刪除涉嫌侵權(quán)內(nèi)容。

總結(jié)

以上是生活随笔為你收集整理的可折叠Web可能会给我们带来的变化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。