[發明專利]一種可折疊屏網頁適配方法、設備及存儲設備

有效

• 申請號: 202011547313.0
• 申請日: 2020-12-24
• 公開（公告）號: CN112558951B
• 公開（公告）日: 2022-04-29
• 發明（設計）人: 徐蔚;何寧波;章書樂;徐軍;李軍;詹開洪;彭濤
• 申請（專利權）人: 大唐互聯科技（武漢）有限公司;大唐融合通信股份有限公司
• 主分類號: G06F8/30
• 分類號: G06F8/30;G06F8/38;G06F16/957;G06F16/958
• 代理公司: 武漢知產時代知識產權代理有限公司 42238
• 代理人: 張毅

本發明提供了一種可折疊屏網頁適配方法、設備及存儲設備，根據主流折疊屏設備參數定義折疊屏不同設備類型在不同設備類型在正常狀態下和折疊展開狀態下的寬度width、高度height及尺寸size；和定義媒體屬性的查詢范圍：媒體查詢和環境變量，并分別編寫非折疊狀態css樣式表和折疊狀態css樣式表，進而設置用戶操作監聽事件，并進行屏幕狀態及折疊寬度解析，和顯示設置參數修改；通過進行DOM元素自適應處理、非DOM對象處理和組件css樣式表處理；直到采用observe方法判斷適配渲染成功為止。本發明的有益效果是：可適配任意屏幕尺寸折疊屏，保證內容區域既不會被設備鉸鏈遮擋或切割，也不會在柔性屏的折疊處顯示，從而提高屏幕利用率及用戶體驗。

技術領域

本發明涉及智能移動終端領域，尤其涉及一種可折疊屏網頁適配方法、設備及存儲設備。

背景技術

隨著顯示技術的變革，可折疊終端的時代正在來臨。折疊屏有多種形式，筆記本電腦、手機、雙屏幕混合設備都有可折疊形式的終端，在折疊屏上，用戶可以做更多的事情。可折疊終端技術中值得關注的不僅僅是折疊屏技術，它更是開啟了移動終端的全新體驗。對于原生系統來說，采用屏幕分屏的方式可以同時打開多個應用程序，從而充分利用屏幕；而對于web網頁，在傳統的屏幕下，只用關注視窗的大小，使用媒體查詢就可以處理好，但在可折疊屏下，需要注意的東西更多，目前還沒有成熟的適配方式。

發明內容

為了解決上述問題，本發明提供了一種可折疊屏網頁適配方法、設備及存儲設備，用于適配于不同尺寸的折疊屏。一種可折疊屏網頁適配方法，主要包括以下步驟：

S1：根據主流折疊屏設備參數定義折疊屏不同設備類型的常量，所述常量包括不同設備類型在正常狀態下和折疊展開狀態下的寬度width、高度height及尺寸size；

S2：根據所述常量，定義媒體屬性的查詢范圍，所述媒體屬性的查詢范圍包括媒體查詢和環境變量；

S3：根據所述媒體屬性的查詢范圍，分別編寫非折疊狀態css樣式表和折疊狀態css樣式表；

S4：根據所述非折疊狀態css樣式表和折疊狀態css樣式表中媒體查詢范圍，設置及編寫用戶操作監聽事件；

S5：根據所述用戶操作監聽事件，在事件觸發時進行屏幕狀態解析、折疊寬度解析和顯示設置參數修改；

S6：針對步驟S5中解析得到的折疊狀態及設備屏幕狀態，DOM元素會根據css樣式表中媒體查詢變量進行自適應，同時根據折疊狀態及折疊寬度解析結果，修改顯示設置參數進行非DOM對象處理和組件css樣式表處理；

S7：進行步驟S6所述的處理后，采用observe方法判斷適配渲染是否成功，若是沒有成功，則返回步驟S3，若是成功，則可折疊屏網頁適配成功。

進一步地，所述環境變量包括：設備顯示區域頂部安全區域設置量env(fold-top)、設備鉸鏈/折疊處設置量env(fold-width)、設備顯示區域高度設置量env(fold-height)和設備顯示區域鉸鏈左側安全區域設置量env(fold-left)。

進一步地，所述用戶操作監聽事件包括窗口大小改變事件resize和終端橫豎屏轉換事件orientationchange。

進一步地，resize或orientationchange監聽觸發后，使用枚舉窗口片段的JavascriptAPI方法window.getWindowSegments()，通過該方法返回的DOMRects數組的長度，可判斷當前設備是折疊狀態還是展開狀態，若返回值status為true，則當前設備為展開態，若返回值status為false，則當前設備為折疊狀態。