可折叠Web可能会给我们带来的变化
作者 | 大漠
可折疊Web的說(shuō)法是可折疊設(shè)備帶來(lái)的。可折疊設(shè)備形式多樣，從筆記本電腦到手機(jī)，再到新奇的雙屏幕混合設(shè)備。對(duì)于這類(lèi)新發(fā)明并沒(méi)有一個(gè)全面的定義，但大多數(shù)都可以歸為兩類(lèi)。“可折疊”是指屏幕可以折疊的設(shè)備（比如華為Mate X，三星Galaxy Z Flip）；而“雙屏”設(shè)備的屏幕是分開(kāi)的，但也可以以獨(dú)特的方式一起工作，以靈活的形式提供生產(chǎn)力（比如，微軟的Surface Neo和Surface Duo）。當(dāng)涉及到Web設(shè)計(jì)時(shí)，這兩種類(lèi)型可能會(huì)遵循類(lèi)似的規(guī)則。如果這項(xiàng)技術(shù)能大獲成功，那么Web設(shè)計(jì)將面臨十年來(lái)最大的變革。這對(duì)于我們Web開(kāi)發(fā)者而言，也將會(huì)開(kāi)啟新的旅程。
聽(tīng)起來(lái)就很令人興奮，但這到底意味著什么呢？可折疊Web將帶來(lái)新的挑戰(zhàn)，新的機(jī)遇，而且很可能還會(huì)帶來(lái)新的概念。互聯(lián)網(wǎng)可能也會(huì)經(jīng)歷自智能手機(jī)以來(lái)最大的變革。你可能會(huì)認(rèn)為這是一種炒作，但事實(shí)上這樣的一天已經(jīng)離我們不是太遠(yuǎn)。記得在去年這個(gè)時(shí)候，有些移動(dòng)品牌商，比如華為，三星都推出可折疊的硬件設(shè)備，而微軟，蘋(píng)果等公司在幕后的努力也不遜色。可以說(shuō)可折疊Web即將到來(lái)。我們真的應(yīng)該去思考可折疊Web可能會(huì)給我?guī)?lái)什么變化？如果這一天真的到來(lái)，我們的技術(shù)是否能支持該設(shè)備。簡(jiǎn)單地說(shuō)，我們開(kāi)發(fā)的Web頁(yè)面能不能在可折疊設(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è)小屏幕，展開(kāi)狀態(tài)是一個(gè)寬屏幕：
比如華為Mate X，屏幕是包裹在手機(jī)外面的：
還有很多像電子書(shū)一樣，當(dāng)設(shè)備完全打開(kāi)時(shí)，內(nèi)部的兩個(gè)顯示屏?xí)隙橐弧ＭǔＴ谕饷嬗幸粋€(gè)獨(dú)立的小屏幕，這樣用戶(hù)在使用的時(shí)候就不用打開(kāi)它。
雙屏幕設(shè)備是具有兩個(gè)對(duì)稱(chēng)屏幕的便攜式設(shè)備，以獨(dú)特的方式一起工作，以靈活的形式提供生產(chǎn)力。比如像微軟的Surface Neo和Surface Duo這樣的雙屏幕設(shè)備，人們可以比以往任何時(shí)間都更快地完成工作。如果你使用過(guò)Surface Neo這樣的雙屏幕設(shè)備，你可以在一個(gè)屏幕上做筆記，在傳輸過(guò)程中在另一個(gè)屏幕上查看完整的項(xiàng)目建議書(shū)：
盡管現(xiàn)在市場(chǎng)上有不同的折疊屏，雙屏幕設(shè)備，而且還會(huì)有更多的類(lèi)似設(shè)備出現(xiàn)，但我們相信為這些設(shè)備設(shè)計(jì)應(yīng)用程序會(huì)有一個(gè)共同的方法。我們希望這將幫助你的應(yīng)用程序能跑在更多的設(shè)備上，而不需要為不同的設(shè)備做特殊的設(shè)計(jì)和處理。
換句話(huà)說(shuō)，在可折疊屏或雙屏幕的設(shè)備上，用戶(hù)可以做更多的事情，比如說(shuō)讓屏幕分屏，可以同時(shí)打開(kāi)多個(gè)應(yīng)用程序：
也可以打開(kāi)同一個(gè)應(yīng)用，在應(yīng)用中分屏，打開(kāi)不同的頁(yè)面，比如：
像上圖這樣，應(yīng)用程序在兩個(gè)屏幕上顯示，就是所謂的跨屏布局。默認(rèn)情況下，該應(yīng)用程序?qū)⒈憩F(xiàn)得好像它是在一個(gè)更大的屏幕上顯示。你也可以改變你現(xiàn)有的應(yīng)用程序布局來(lái)適應(yīng)兩個(gè)屏幕之間的縫隙，或者你可以更進(jìn)一步，允分的利用雙屏幕設(shè)備而專(zhuān)門(mén)創(chuàng)建不同的布局控件。比如iPad版本的手淘，就可以分屏展示：
新的 Web 標(biāo)準(zhǔn)、新的體驗(yàn)和新的問(wèn)題
可折疊和雙屏幕設(shè)備正在出現(xiàn)。這已經(jīng)不是概念，也不是炒作。這更不是重點(diǎn)。重點(diǎn)是：
可折疊和雙屏幕這項(xiàng)技術(shù)將如何影響Web開(kāi)發(fā)人員、用戶(hù)體驗(yàn)設(shè)計(jì)師以及其他以提供高質(zhì)量瀏覽體驗(yàn)為業(yè)務(wù)的人。
首先可折疊和雙屏幕會(huì)給視覺(jué)設(shè)計(jì)師在做設(shè)計(jì)的時(shí)候帶來(lái)很大的變化。
整個(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è)備無(wú)法做到的。這使得大多數(shù)可折疊手機(jī)處于一個(gè)模糊地帶，給人用戶(hù)的體驗(yàn)就會(huì)變得很糟糕，這也是因?yàn)樵趥鹘y(tǒng)手機(jī)中是無(wú)法達(dá)到16:9的比例。
為了讓可折疊手機(jī)成為一種有用的媒體設(shè)備，它必須轉(zhuǎn)換成16:9或18:9的設(shè)備，然后再折疊成8:9或9:9 —— 基本上就是一個(gè)正方形。@Nathan Cunn通過(guò)計(jì)算得出結(jié)論，折疊手機(jī)的完美寬高比應(yīng)該是其寬度的1.4倍。
這也將會(huì)是iPhone折疊屏將會(huì)采用的一種寬高比例：
除此之外，不管是可折疊設(shè)備還是雙屏幕設(shè)備，最大的特征就是屏幕變大了，在展開(kāi)的狀態(tài)下和平板一樣了。這樣一來(lái)，可用的空間就變大了。
可折疊和多屏設(shè)備打破了移動(dòng)設(shè)備（手機(jī)）可用空間小的束縛！
空間大了，能放置的內(nèi)容就多了，如果設(shè)計(jì)還是按著以前的思路，直接拉伸平滿(mǎn)全屏，就過(guò)于浪費(fèi)了。面對(duì)這樣的場(chǎng)景，除了響應(yīng)式Web設(shè)計(jì)能幫助我們更好的利用可用空間之外，還可以參照淘寶設(shè)計(jì)提出的一個(gè)概念：
讓你的內(nèi)容像水一樣的流動(dòng)（“Content is like water”）
用一張圖來(lái)描述：
有關(guān)于這方面更詳細(xì)的介紹，可以關(guān)注淘寶設(shè)計(jì)微信公眾號(hào)。
你可以搜索“可折疊”關(guān)鍵詞，能找到一些這方面的文章，比如：
- 不要驚訝，折疊屏就應(yīng)該這樣設(shè)計(jì)！
- 獨(dú)家揭秘淘寶折疊屏設(shè)計(jì)內(nèi)幕與適配開(kāi)發(fā)
- 跨端設(shè)計(jì)又雙叒來(lái)了，只是響應(yīng)式換個(gè)名字？
對(duì)于雙屏幕給設(shè)計(jì)帶來(lái)的變化，或者說(shuō)設(shè)計(jì)應(yīng)該要注意的細(xì)節(jié)，可以閱讀微軟官方有關(guān)于雙屏幕的介紹：《Introduction to dual-screen devices》。
另外，折疊屏幕還會(huì)帶來(lái)一些其他的設(shè)計(jì)和體驗(yàn)變化。
單（雙）手移動(dòng)設(shè)計(jì)
隨著狀態(tài)的改變（這里的狀態(tài)是折疊和展開(kāi)狀態(tài)，單屏和多屏狀態(tài)），整個(gè)體驗(yàn)本身也隨之改變。目前大多數(shù)用戶(hù)都習(xí)慣用一只手操作移動(dòng)設(shè)備（手機(jī)），而展開(kāi)狀態(tài)，就像iPad了，這個(gè)時(shí)候需要兩只手來(lái)操作設(shè)備（或應(yīng)用）。
手機(jī)操作 vs 平板操作
屏幕連續(xù)性和間隔
可折疊設(shè)備和多屏幕設(shè)備有著明顯的區(qū)別。
可折疊設(shè)備在展開(kāi)狀態(tài)時(shí)，它的屏幕是連續(xù)性的，我們?cè)谠O(shè)計(jì)的體驗(yàn)應(yīng)該無(wú)縫地轉(zhuǎn)移到全屏上。
針對(duì)這樣的情景，如果只是粗暴的放大到全屏，那么布局上不會(huì)有太多的變化，只不過(guò)對(duì)于Web中的部分對(duì)象會(huì)變得模糊，比如圖像。當(dāng)然，也可以考慮設(shè)計(jì)上做差異性的處理，比如說(shuō)做分屏設(shè)計(jì)：
對(duì)于多屏幕設(shè)備，有可能屏幕不是連續(xù)性的，比如微軟的Surface Neo和Surface Duo，屏幕之間就有一個(gè)間隙：
在設(shè)計(jì)和布局的時(shí)候，就需要避免Web對(duì)象處在兩個(gè)屏幕的間隙之間，比如：
或者：
多窗口，多應(yīng)用
前面提到過(guò)，折疊屏和多屏幕最大的特征之一，就讓我們有更多的空間可利用。這樣對(duì)于用戶(hù)來(lái)說(shuō)，對(duì)于處理多任務(wù)更友好，能同時(shí)做更多的事情。因此，我們應(yīng)該始終考慮用戶(hù)可能會(huì)同時(shí)運(yùn)行多個(gè)App應(yīng)用。比如說(shuō)，一邊查看日歷，一邊查看地圖，一邊看新聞：
除了同時(shí)打開(kāi)多個(gè)App應(yīng)用之外，還可以在同一個(gè)App中，分屏做不同的事情，比如，一邊看直播，一邊逛淘寶：
折疊屏和多屏幕除了給設(shè)計(jì)師帶來(lái)新的挑戰(zhàn)之外，給Web開(kāi)發(fā)者也帶來(lái)相應(yīng)的挑戰(zhàn)。在去年華為Mate X出來(lái)的時(shí)候，有幸參與在Mate X做一些Web端的適配處理。主要處理H5的應(yīng)用完美適配折疊屏設(shè)備。
由于相關(guān)H5業(yè)務(wù)采用的都是視窗單位vw（我常稱(chēng)該方案為vw-layout），能較好的讓相應(yīng)的H5業(yè)務(wù)適配折疊屏展開(kāi)狀態(tài)，但也存在一些相應(yīng)的問(wèn)題，最為突出的是圖像變得模糊：
當(dāng)然也嘗試著采用響應(yīng)式Web設(shè)計(jì)來(lái)做不同的布局處理：
雖然該方式可以讓我們的H5應(yīng)用最大化的利用折疊屏可用空間，但也存在一定的缺陷。因此在《聊聊安卓折疊屏給交互設(shè)計(jì)和開(kāi)發(fā)帶來(lái)的變化》一文中提出相應(yīng)的概念：
處理折疊屏?xí)r，我們應(yīng)該像一些帶有劉海設(shè)備（比如iPhone X）一樣，具有獨(dú)特的檢測(cè)特性來(lái)檢測(cè)折疊設(shè)備或多屏幕設(shè)備。
值得慶幸的是這一年來(lái)，在這方面有了明顯的變化，尤其是微軟公司的團(tuán)隊(duì)對(duì)可折疊技術(shù)的探究和討論非常的積極。在今年2月份，三位微軟開(kāi)發(fā)人員@Bogdan Brinza、@Daniel Libby和@Zouhir Chahoud發(fā)表了一篇文章，解釋如何使用JavaScript API和CSS 媒體查詢(xún)來(lái)處理可折疊和多屏幕設(shè)備的布局。
該文檔提出兩個(gè)概念：用于雙屏幕布局的CSS 和 窗口段枚舉的JavaScript API。它的宗旨是作為討論折疊屏和多屏幕在Web開(kāi)發(fā)中技術(shù)標(biāo)準(zhǔn)。即：以可折疊和雙屏幕設(shè)備為目標(biāo)的Web開(kāi)發(fā)人員能夠在跨多個(gè)顯示區(qū)域的窗口中有效的對(duì)Web應(yīng)用進(jìn)行布局。
未來(lái)處理可折疊或多屏幕的 Web 技術(shù)
從@Bogdan Brinza、@Daniel Libby和@Zouhir Chahoud三位開(kāi)發(fā)者在Github上發(fā)表的文檔《Web Platform Primitives for Enlightened Experiences on Foldable Devices》來(lái)看。處理可折疊和多屏幕設(shè)備的Web布局主要由兩部分特性組成，其一是CSS的媒體查詢(xún)特性，其二是JavaScript API。
接下來(lái)，我們主要圍繞著這兩個(gè)部分來(lái)展開(kāi)。
用于構(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)境變量（指的是用戶(hù)代理定義的環(huán)境變量），它將幫助Web開(kāi)發(fā)人員以CSS像素計(jì)算每個(gè)屏幕區(qū)域的大小。
為什么要提出新的CSS特性
當(dāng)瀏覽器窗口跨越設(shè)備折疊時(shí)，告訴Web開(kāi)發(fā)者折疊方向和顯示邊界可以幫助他們開(kāi)發(fā)出來(lái)具有較好體驗(yàn)的Web應(yīng)用。這里快速概述可能會(huì)出現(xiàn)的模式。
將更大屏幕的UI模式帶到更小的便攜設(shè)備
由于屏幕尺寸的限制，傳統(tǒng)的便攜式觸摸設(shè)備在很大程度上依賴(lài)于“疊加視圖”，比如點(diǎn)擊收件箱列表中的一封郵件，就會(huì)導(dǎo)致整個(gè)收件箱列表視圖被選中的郵件內(nèi)容視圖所取代。這種行為通常會(huì)創(chuàng)建額外的操作步驟；而在更大屏幕的設(shè)備上將會(huì)有一個(gè)更自然的配置，郵件收件箱列表視圖和郵件內(nèi)容視圖是并排的。
當(dāng)然，這種重新創(chuàng)造的模式并不是唯一的解決方案，只不過(guò)可折疊屏和多屏幕設(shè)備相對(duì)于傳統(tǒng)的便攜觸摸式移動(dòng)設(shè)備來(lái)說(shuō)多了一個(gè)顯示器，相當(dāng)于增加一個(gè)屏幕空間，這樣一來(lái)可以為Web開(kāi)發(fā)者和設(shè)計(jì)師提供獨(dú)特的機(jī)會(huì)來(lái)創(chuàng)造新的體驗(yàn)。
輕松改進(jìn)現(xiàn)有的Web應(yīng)用和UI組件
Web開(kāi)發(fā)人員可能不想為這類(lèi)設(shè)備引入主要的UI更改，而只想簡(jiǎn)單地移動(dòng)一些組件。在下面的示例中，對(duì)于模態(tài)對(duì)話(huà)框（Modal）避免設(shè)備折疊更有意義（無(wú)論可折疊設(shè)備是無(wú)縫的還是有間隙的），并允許Web開(kāi)發(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)類(lèi)似于劉海設(shè)備一樣，通過(guò)env()函數(shù)來(lái)識(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開(kāi)發(fā)人員可以利用這些變量來(lái)計(jì)算橫屏和豎屏的每個(gè)屏幕片段大小。
注意，這些CSS環(huán)境變量的值是CSS像素，并且是相對(duì)于布局視圖的（即在客戶(hù)端坐標(biāo)中，由CSSOM視圖定義）。當(dāng)不處于跨越狀態(tài)時(shí)，這些值將被視為不存在，則會(huì)取env()函數(shù)的回退值。
來(lái)看一個(gè)簡(jiǎn)單的示例：一個(gè)地圖應(yīng)用程序，在一個(gè)屏幕上顯示地圖，在另一個(gè)屏幕上顯示搜索結(jié)果。如下圖所示：
如果用CSS代碼來(lái)實(shí)現(xiàn)的話(huà)，大致如下：
spanning 的 Polyfill
到目前為止，新增的CSS媒體特性spanning和相應(yīng)的環(huán)境變量都還處于草案的討論階，但如果你要嘗試著在折疊設(shè)備或多屏幕設(shè)備上使用該特性的話(huà)，可以使用@darktears 提供的一個(gè)Polyfill。
這個(gè)Polyfill的使用很簡(jiǎn)單，你可以使用NPM將這個(gè)Polyfill加載到你的項(xiàng)目中：
npm install --save spanning-css-polyfill安裝完之后，通過(guò)<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è)新媒體查詢(xún)特性和CSS環(huán)境變量fold-top、fold-left、fold-width和fold-height。
當(dāng)然，你還可以手動(dòng)改變顯示（display）相關(guān)的配置。比如，通過(guò)導(dǎo)入FoldablesFeature對(duì)象：
import { FoldablesFeature } from '/path/to/modules/spanning-css-polyfill/spanning-css-polyfill.js';可以通過(guò)FoldablesFeature對(duì)象來(lái)更新像spanning、foldSize和browserShellSize等值。你也可以訂閱change事件，以便spanning媒體查詢(xún)特性或環(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)的解釋、問(wèn)題和評(píng)論，可以參閱GitHub的webscreens/window-segments倉(cāng)庫(kù)。
這里提出了一個(gè)窗口片段的新概念，它表示位于單獨(dú)（相鄰）顯示上的窗口區(qū)域（及其尺寸）。窗口片段尺寸以CSS像素表示，并允許Web開(kāi)發(fā)者通過(guò)JavaScript API對(duì)窗口片段進(jìn)行枚舉，在相應(yīng)的窗口片段上放置獨(dú)立內(nèi)容。
這個(gè)建議主要針對(duì)響應(yīng)式場(chǎng)景，在這種情況下，Web應(yīng)用程序希望利用跨越多個(gè)顯示的優(yōu)勢(shì)，通過(guò)用戶(hù)、窗口管理器將其置于該狀態(tài)。它不適合將內(nèi)容預(yù)先放置在各種可用顯示的單獨(dú)頂級(jí)瀏覽器上下文的情況（這屬于Window Placement API和Presentation API）。請(qǐng)注意，使用枚舉窗口片段的API和Web現(xiàn)有的特性，可以使用JavaScript來(lái)編寫(xiě)交叉顯示和窗口的矩形，同時(shí)考慮devicePixelRatio來(lái)，計(jì)算橫跨多個(gè)顯示的窗口區(qū)域。不過(guò)，這個(gè)并不能正確的處理未來(lái)設(shè)備形式中存在的極端情況，因此，這個(gè)提議試圖解決Web開(kāi)發(fā)人員針對(duì)或考慮顯示內(nèi)容屏幕作為一個(gè)實(shí)際的起點(diǎn)。
簡(jiǎn)單地來(lái)說(shuō)，Web開(kāi)發(fā)者可以使用getWindowSegments()來(lái)獲取一個(gè)DOMRects數(shù)組，然后根據(jù)每個(gè)窗口片段返回的數(shù)據(jù)，開(kāi)發(fā)人員能夠推斷出可用鏈接（Hinge）的數(shù)量以及其方向。
用戶(hù)可以在任何時(shí)候?qū)g覽器窗口脫離跨越模式，并將其放在某個(gè)屏幕上，反之亦然，在這種情況下，將觸發(fā)窗口resize事件，從而可以查詢(xún)并獲得可用屏幕段的數(shù)量。
比如我們上面提到的示例：
如果使用JavaScript來(lái)解決的話(huà)，可以像下面這樣：
我們?cè)賮?lái)看另一個(gè)示例，當(dāng)窗口的resize事件和spanning狀態(tài)發(fā)現(xiàn)變化時(shí)處理方案。
先看CSS的解決方案：
如果使用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)：多屏幕布局
最后我們來(lái)看實(shí)際案例。
你可能在手上沒(méi)有折疊屏或多屏幕的設(shè)備，有可能無(wú)法看到實(shí)際效果。但可以使用一款基于Web的模擬器，這款模擬器可以模擬微軟 Surface Duo 和 Surface Neo兩款分屏設(shè)備：
embed: foldable-web-27.mp4
@kenchris 在GitHub上spanning-css-polyfill提供了幾個(gè)Demo，我們來(lái)看最簡(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來(lái)構(gòu)建CSS方面的樣式。
<script type="module" src="../../src/index.js"></script>index.js對(duì)應(yīng)的詳細(xì)代碼可以點(diǎn)擊這里查閱。
接著看CSS部分。在CSS中使用媒體查詢(xún)特性：
/* 普通設(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:
注意，示例中還使用了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)效果
接下來(lái)再來(lá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)單的示例。那么接下來(lái)，我們?cè)谏厦娴幕A(chǔ)上把頁(yè)面做得稍微復(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è)備添加樣式（也可以說(shuō)是全局樣式）：
/* 布局關(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做樣式上的處理：
這個(gè)時(shí)候水平分屏狀態(tài)下的效果如下：
接著來(lái)看垂直方向的分屏狀態(tài)下的效果，先來(lái)看未處理時(shí)的效果：
接下來(lái)在spanning: single-fold-horizontal媒體特性下做一些布局上的處理：
看到的效果如下：
實(shí)際操作的時(shí)候，應(yīng)該根據(jù)自己的使用場(chǎng)景，然后對(duì)應(yīng)的媒體查詢(xún)特性中配合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頁(yè)面來(lái)說(shuō)，需要做一定的調(diào)整，而對(duì)于另一些Web應(yīng)用來(lái)說(shuō)，則意味著需要大規(guī)模的重新設(shè)計(jì)。這個(gè)范圍取決于開(kāi)發(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è)用戶(hù)自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，阿里云開(kāi)發(fā)者社區(qū)不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。具體規(guī)則請(qǐng)查看《阿里云開(kāi)發(fā)者社區(qū)用戶(hù)服務(wù)協(xié)議》和《阿里云開(kāi)發(fā)者社區(qū)知識(shí)產(chǎn)權(quán)保護(hù)指引》。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容，填寫(xiě)侵權(quán)投訴表單進(jìn)行舉報(bào)，一經(jīng)查實(shí)，本社區(qū)將立刻刪除涉嫌侵權(quán)內(nèi)容。總結(jié)
以上是生活随笔為你收集整理的可折叠Web可能会给我们带来的变化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 从架构到源码：一文了解Flutter渲染
- 下一篇： 测试面试题集锦（五）| 自动化测试与性能