[發(fā)明專(zhuān)利]一種可折疊屏網(wǎng)頁(yè)適配方法、設(shè)備及存儲(chǔ)設(shè)備

有效

• 申請(qǐng)?zhí)枺?/td>: 202011547313.0
• 申請(qǐng)日: 2020-12-24
• 公開(kāi)（公告）號(hào): CN112558951B
• 公開(kāi)（公告）日: 2022-04-29
• 發(fā)明（設(shè)計(jì)）人: 徐蔚;何寧波;章書(shū)樂(lè);徐軍;李軍;詹開(kāi)洪;彭濤
• 申請(qǐng)（專(zhuān)利權(quán)）人: 大唐互聯(lián)科技（武漢）有限公司;大唐融合通信股份有限公司
• 主分類(lèi)號(hào): G06F8/30
• 分類(lèi)號(hào): G06F8/30;G06F8/38;G06F16/957;G06F16/958
• 代理公司: 武漢知產(chǎn)時(shí)代知識(shí)產(chǎn)權(quán)代理有限公司 42238
• 代理人: 張毅

1.一種可折疊屏網(wǎng)頁(yè)適配方法，其特征在于：包括以下步驟：

S1：根據(jù)主流折疊屏設(shè)備參數(shù)定義折疊屏不同設(shè)備類(lèi)型的常量，所述常量包括不同設(shè)備類(lèi)型在正常狀態(tài)下和折疊展開(kāi)狀態(tài)下的寬度width、高度height及尺寸size；

S2：根據(jù)所述常量，定義媒體屬性的查詢(xún)范圍，所述媒體屬性的查詢(xún)范圍包括媒體查詢(xún)和環(huán)境變量；

S3：根據(jù)所述媒體屬性的查詢(xún)范圍，分別編寫(xiě)非折疊狀態(tài)css樣式表和折疊狀態(tài)css樣式表；

S4：根據(jù)所述非折疊狀態(tài)css樣式表和折疊狀態(tài)css樣式表中媒體查詢(xún)范圍，設(shè)置及編寫(xiě)用戶(hù)操作監(jiān)聽(tīng)事件；

S5：根據(jù)所述用戶(hù)操作監(jiān)聽(tīng)事件，在事件觸發(fā)時(shí)進(jìn)行屏幕狀態(tài)解析、折疊寬度解析和顯示設(shè)置參數(shù)修改；

S6：針對(duì)步驟S5中解析得到的折疊狀態(tài)及設(shè)備屏幕狀態(tài)，DOM元素會(huì)根據(jù)css樣式表中媒體查詢(xún)變量進(jìn)行自適應(yīng)，同時(shí)根據(jù)折疊狀態(tài)及折疊寬度解析結(jié)果，修改顯示設(shè)置參數(shù)進(jìn)行非DOM對(duì)象處理和組件css樣式表處理；

S7：進(jìn)行步驟S6所述的處理后，采用observe方法判斷適配渲染是否成功，若是沒(méi)有成功，則返回步驟S3，若是成功，則可折疊屏網(wǎng)頁(yè)適配成功。

2.如權(quán)利要求1所述的一種可折疊屏網(wǎng)頁(yè)適配方法，其特征在于：步驟S2中，所述環(huán)境變量包括：設(shè)備顯示區(qū)域頂部安全區(qū)域設(shè)置量env(fold-top)、設(shè)備鉸鏈/折疊處設(shè)置量env(fold-width)、設(shè)備顯示區(qū)域高度設(shè)置量env(fold-height)和設(shè)備顯示區(qū)域鉸鏈左側(cè)安全區(qū)域設(shè)置量env(fold-left)。

3.如權(quán)利要求1所述的一種可折疊屏網(wǎng)頁(yè)適配方法，其特征在于：步驟S4中，所述用戶(hù)操作監(jiān)聽(tīng)事件包括窗口大小改變事件resize和終端橫豎屏轉(zhuǎn)換事件orientationchange。

4.如權(quán)利要求3所述的一種可折疊屏網(wǎng)頁(yè)適配方法，其特征在于：步驟S5中，resize或orientationchange監(jiān)聽(tīng)觸發(fā)后，使用枚舉窗口片段的JavascriptAPI方法window.getWindowSegments()，通過(guò)該方法返回的DOMRects數(shù)組的長(zhǎng)度，用于判斷當(dāng)前設(shè)備是折疊狀態(tài)還是展開(kāi)狀態(tài)，若返回值status為true，則當(dāng)前設(shè)備為展開(kāi)態(tài)，若返回值status為false，則當(dāng)前設(shè)備為折疊狀態(tài)。

5.如權(quán)利要求3所述的一種可折疊屏網(wǎng)頁(yè)適配方法，其特征在于：步驟S5中，resize事件觸發(fā)時(shí)，通過(guò)全局引入spanning-css-polyfill.js插件，修改折疊狀態(tài)css-spanning值、折疊寬度f(wàn)oldSize和瀏覽器大小尺寸browserShellSize顯示參數(shù)。

6.如權(quán)利要求1所述的一種可折疊屏網(wǎng)頁(yè)適配方法，其特征在于：步驟S7中，所述observe方法來(lái)自于spanning-css-polyfill.js插件。

7.一種存儲(chǔ)設(shè)備，其特征在于：所述存儲(chǔ)設(shè)備存儲(chǔ)指令及數(shù)據(jù)用于實(shí)現(xiàn)權(quán)利要求1～6任一項(xiàng)所述的可折疊屏網(wǎng)頁(yè)適配方法。

8.一種可折疊屏網(wǎng)頁(yè)適配設(shè)備，其特征在于：包括：處理器及存儲(chǔ)設(shè)備；所述處理器加載并執(zhí)行所述存儲(chǔ)設(shè)備中的指令及數(shù)據(jù)用于實(shí)現(xiàn)權(quán)利要求1～6任一項(xiàng)所述的可折疊屏網(wǎng)頁(yè)適配方法。