wap端一屏背景頁面瀏覽器 手機相容性問題

2022-06-23 16:33:13 字數 564 閱讀 5157

近日,做了一個wap端企業展示官網,遇到一個問題,該需求如下:

需求:在首頁所有內容只有一個背景,所有內容都呈現在該背景上,如圖所示:

頁面結構如下:

<

body

>

<

div

class

="container"

>

div>

body

>

如下問題:

1、在瀏覽器中拖拽到底部後會出現留白,目測留白大小與瀏覽器自帶搜尋框高度,當搜尋框顯示在瀏覽器上時頁面顯示正常,當頁面滑動到底部,搜尋框消失後,頁面底部會多出搜尋框大小的留白麵積。

2、在不同的手機上顯示背景高度不同,有的手機螢幕較長,一屏背景無法完全滿屏,底部會留出空白部分。

解決辦法:

利用js解決,當頁面全部載入完成後再去判斷windows的高度,背景放在 body::before 中。