當(dāng)前位置：首頁 > 科技 > 軟件

前端開發(fā)折疊屏應(yīng)用新姿勢！

來源：責(zé)編：時間：2024-05-07 09:15:28 164觀看

導(dǎo)讀Chrome 瀏覽器正在試驗兩個全新的 API：Device Posture API（設(shè)備姿態(tài)API）和 Viewport Segments Enumeration API（視口段枚舉API），這兩個 API 統(tǒng)稱為 Foldable APIs（可折疊API），它們從 Chrome 125 版本開始作為起源試驗功能提供

Chrome 瀏覽器正在試驗兩個全新的 API：Device Posture API（設(shè)備姿態(tài)API）和 Viewport Segments Enumeration API（視口段枚舉API），這兩個 API 統(tǒng)稱為 Foldable APIs（可折疊API），它們從 Chrome 125 版本開始作為起源試驗功能提供。這些 API 旨在幫助開發(fā)者更好地針對可折疊設(shè)備進(jìn)行開發(fā)和優(yōu)化，本文就來看看這些 API 如何解鎖折疊屏應(yīng)用開發(fā)新姿勢。

這些 API 是在過去幾年中，微軟、英特爾、三星和谷歌合作開發(fā)的。

可折疊設(shè)備

可折疊設(shè)備主要分為兩種物理形態(tài)：一種是只有單個柔性屏幕（無縫）的設(shè)備，另一種是擁有兩個屏幕（有縫，也稱為雙屏設(shè)備）的設(shè)備。

這些設(shè)備為內(nèi)容的展示提供了多樣化的方式。例如，用戶可以像翻閱書籍一樣使用無縫設(shè)備，也可以像使用平板電腦一樣將其展開為平面屏幕。而雙屏設(shè)備因其兩塊屏幕之間存在物理接縫，需要開發(fā)者特別關(guān)注這一點。

這些新的 API 為開發(fā)者提供了改善這類設(shè)備用戶體驗的方法。每個 API 都通過CSS和JavaScript兩種途徑，向開發(fā)者開放了所需的 Web 平臺基礎(chǔ)功能。

Device Posture API

可折疊設(shè)備具備改變其姿態(tài)（即設(shè)備的物理狀態(tài)）的能力，從而允許開發(fā)者提供不同的用戶體驗。這些新的API確保網(wǎng)頁內(nèi)容能夠靈活響應(yīng)設(shè)備的各種折疊狀態(tài)。

設(shè)備可以呈現(xiàn)以下兩種姿態(tài)：

折疊態(tài)：類似于筆記本電腦或書籍的姿態(tài)。

連續(xù)態(tài)：平板模式，類似于無縫的平板及曲面顯示屏。

CSS

Device Posture API 規(guī)范引入了一個新的 CSS 媒體特性 device-posture，該特性能夠解析出設(shè)備的一組固定姿態(tài)。這些姿態(tài)由預(yù)定義的值組成，每個值都代表設(shè)備的物理狀態(tài)。

device-posture 特性支持的值與前面描述的設(shè)備姿態(tài)相匹配：

folded（折疊態(tài)）
continuous（連續(xù)態(tài)）

注意：如果未來有新的設(shè)備上市，可能會添加新的姿態(tài)。

示例：

/* 當(dāng)設(shè)備處于“書籍”姿態(tài)時 */@media (device-posture: folded) { ... } /* 當(dāng)設(shè)備處于“平板”姿態(tài)時，或者像筆記本電腦或臺式電腦這樣的典型設(shè)備 */@media (device-posture: continuous) { ... }

JavaScript

為了查詢設(shè)備的姿態(tài)，現(xiàn)在可以使用一個新的 DevicePosture 對象。

const currentPosture = navigator.devicePosture.type;  console.log(`當(dāng)前設(shè)備的姿態(tài)是：${currentPosture}`);

要監(jiān)聽設(shè)備姿態(tài)的變化，并作出響應(yīng)，可以注冊一個事件監(jiān)聽器:

navigator.devicePosture.addEventListener('change', (event) => {    console.log(`設(shè)備的姿態(tài)已更改為：${event.type}`);    // 在這里可以根據(jù)新的姿態(tài)更新頁面的布局或內(nèi)容  });

Viewport Segments API

Viewport Segments 是CSS環(huán)境變量，用于定義視口中邏輯上獨立區(qū)域的位置和尺寸。當(dāng)視口被硬件特性（如折疊處或獨立顯示器之間的鉸鏈）分割時，會形成視口段。這些段是開發(fā)者可以視為邏輯上不同的視口區(qū)域。

CSS

視口被分割成的段數(shù)通過兩個新的媒體特性來呈現(xiàn)，這些特性在CSS媒體查詢第5級規(guī)范中定義：vertical-viewport-segments（垂直視口段數(shù)）和horizontal-viewport-segments（水平視口段數(shù)）。這些特性會解析出視口被分割成的段數(shù)。

此外，還新增了環(huán)境變量來查詢每個邏輯分割的尺寸和位置。這些變量包括：

env(viewport-segment-width: x y)：查詢指定(x, y)位置視口段的寬度。
env(viewport-segment-height: x y)：查詢指定(x, y)位置視口段的高度。
env(viewport-segment-top: x y)：查詢指定(x, y)位置視口段的上邊界位置。
env(viewport-segment-left: x y)：查詢指定(x, y)位置視口段的左邊界位置。
env(viewport-segment-bottom: x y)：查詢指定(x, y)位置視口段的下邊界位置。
env(viewport-segment-right: x y)：查詢指定(x, y)位置視口段的右邊界位置。

每個變量中的(x, y)坐標(biāo)代表了由硬件特性在視口中創(chuàng)建的二維網(wǎng)格中的位置。

在上圖中，第一個水平段的坐標(biāo)是 x 0 和 y 0，第二個水平段的坐標(biāo)是 x 1 和 y 0。第一個垂直段的坐標(biāo)是 x 0 和 y 0，第二個垂直段的坐標(biāo)是 x 0 和 y 1。

以下代碼片段是一個簡化的例子，展示了如何創(chuàng)建一個在折疊處兩側(cè)都有兩個內(nèi)容區(qū)域（col1 和 col2）的分割 UX。

<style>  /* 當(dāng)視口水平分割為兩段時 */  @media (horizontal-viewport-segments: 2) {    #segment-css-container {      flex-direction: row;    }    #col1 {      display: flex;      flex: 0 0 env(viewport-segment-right 0 0);      background-color: steelblue;    }    #fold {      width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));      background-color: black;      height: 100%;    }    #col2 {      display: flex;      background-color: green;    }  }  /* 當(dāng)視口垂直分割為兩段時 */  @media (vertical-viewport-segments: 2) {    #segment-css-container {      flex-direction: column;    }    #col1 {      display: flex;      flex: 0 0 env(viewport-segment-bottom 0 0);      background-color: pink;    }    #fold {      width: 100%;      height: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));      background-color: black;    }    #col2 {      display: flex;      background-color: seagreen;    }  }</style><div id="segment-css-container">  <div id="col1"></div>  <div id="fold"></div>  <div id="col2"></div></div>

下圖展示了物理設(shè)備上的體驗：

JavaScript

要獲取視口段的數(shù)量，可以檢查 visualViewport 對象中的 segments 屬性，它返回一個數(shù)組：

const segments = window.visualViewport.segments;  console.log('視口具有以下段:', segments);

segments 數(shù)組中的每一項代表視口的一個邏輯段，這些邏輯段使用 DOMArray 來描述坐標(biāo)和大小。segments 字段是查詢時給定狀態(tài)的快照，為了接收更新的值，需要監(jiān)聽姿態(tài)變化（如屏幕旋轉(zhuǎn)）或調(diào)整大小事件，并重新查詢 segments 屬性。

簡單來說，這段代碼可以查看當(dāng)前視口被邏輯分割成的段的信息。如果想要追蹤這些段如何隨著窗口大小變化或設(shè)備姿態(tài)變化而變化，需要設(shè)置事件監(jiān)聽器來捕獲這些變化并重新獲取 segments 屬性的值。

嘗試 Foldable APIs

可折疊 API 已在 Chrome 125 到 Chrome 128 的版本中進(jìn)行了原始試驗。

為了進(jìn)行本地測試，可以通過訪問 chrome://flags/#enable-experimental-web-platform-features 來啟用可折疊 API。另外，還可以通過在命令行中運行 Chrome 并添加 --enable-experimental-web-platform-featues 參數(shù)來啟用這些功能。

本文鏈接：http://www.www897cc.com/showinfo-26-87041-0.html前端開發(fā)折疊屏應(yīng)用新姿勢！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： .NET中的多線程超時處理實踐

下一篇：深入了解 aiohttp：掌握異步網(wǎng)絡(luò)編程的利器！

標(biāo)簽：

熱門焦點

一加Ace2 Pro官宣：普及16G內(nèi)存引領(lǐng)24G

一加官方今天繼續(xù)為本月發(fā)布的新機(jī)一加Ace2 Pro帶來預(yù)熱，公布了內(nèi)存方面的信息。“淘汰 8GB ，12GB 起步，16GB 普及，24GB 引領(lǐng)，還有呢？#一加Ace2Pro#，2023 年 8 月，敬請期待。”同時
對標(biāo)蘋果的靈動島華為帶來實況窗功能

繼蘋果的靈動島之后，華為也在今天正式推出了“實況窗”功能。據(jù)今天鴻蒙OS 4.0的現(xiàn)場演示顯示，華為的實況窗可以更高效的展現(xiàn)出實時通知，比如鎖屏上就能看到外賣、打車、銀行
中興AX5400Pro+上手體驗：再升級雙2.5G網(wǎng)口+USB 3.0這次全都有

2021年11月的時候，中興先后發(fā)布了兩款路由器產(chǎn)品，中興AX5400和中興AX5400 Pro，從產(chǎn)品命名上就不難看出這是隸屬于同一系列的，但在外觀設(shè)計上這兩款產(chǎn)品可以說是完全沒一點關(guān)系
把LangChain跑起來的三個方法

使用LangChain開發(fā)LLM應(yīng)用時，需要機(jī)器進(jìn)行GLM部署，好多同學(xué)第一步就被勸退了，那么如何繞過這個步驟先學(xué)習(xí)LLM模型的應(yīng)用，對Langchain進(jìn)行快速上手？本片講解3個把LangChain跑起來
Flowable工作流引擎的科普與實踐

一.引言當(dāng)我們在日常工作和業(yè)務(wù)中需要進(jìn)行各種審批流程時，可能會面臨一系列技術(shù)和業(yè)務(wù)上的挑戰(zhàn)。手動處理這些審批流程可能會導(dǎo)致開發(fā)成本的增加以及業(yè)務(wù)復(fù)雜度的上升。在這
一文搞定Java NIO，以及各種奇葩流

大家好，我是哪吒。很多朋友問我，如何才能學(xué)好IO流，對各種流的概念，云里霧里的，不求甚解。用到的時候，現(xiàn)百度，功能雖然實現(xiàn)了，但是為什么用這個？不知道。更別說效率問題了~下次再遇到，
中國家電海外掘金正當(dāng)時｜出海專題

作者｜吳南南編輯｜胡展嘉運營｜陳佳慧出品｜零態(tài)LT（ID：LingTai_LT）2023年，出海市場戰(zhàn)況空前，中國創(chuàng)業(yè)者在海外紛紛摩拳擦掌，以期能夠把中國的商業(yè)模式、創(chuàng)業(yè)理念、戰(zhàn)略打法輸出海外，他們依
東方甄選單飛：有些鳥注定是關(guān)不住的

作者：彭寬鴻來源：華爾街科技眼&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;東方甄選創(chuàng)始人俞敏洪帶隊的“7天甘肅行”直播活動已在近日順利收官。成立后一
榮耀Magic4 至臻版首創(chuàng)智慧隱私通話強勁影音系統(tǒng)

2022年第一季度臨近尾聲，在該季度內(nèi)，許多品牌陸續(xù)發(fā)布自己的最新產(chǎn)品，讓大家從全新的角度來了解當(dāng)今的手機(jī)技術(shù)。手機(jī)是電子設(shè)備中，更新迭代十分迅速的一款產(chǎn)品，基

日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

前端開發(fā)折疊屏應(yīng)用新姿勢！

可折疊設(shè)備

Device Posture API

CSS

JavaScript

Viewport Segments API

JavaScript

嘗試 Foldable APIs

一加Ace2 Pro官宣：普及16G內(nèi)存引領(lǐng)24G

對標(biāo)蘋果的靈動島華為帶來實況窗功能

中興AX5400Pro+上手體驗：再升級雙2.5G網(wǎng)口+USB 3.0這次全都有

把LangChain跑起來的三個方法

Flowable工作流引擎的科普與實踐

一文搞定Java NIO，以及各種奇葩流

中國家電海外掘金正當(dāng)時｜出海專題

東方甄選單飛：有些鳥注定是關(guān)不住的

榮耀Magic4 至臻版首創(chuàng)智慧隱私通話強勁影音系統(tǒng)

最新推薦

猜你喜歡

熱門推薦

相關(guān)資訊