Android平板電腦上的單頁網頁應用程序高度問題

我正在使用身高：100％的SPA，其中一個頁面包含一個窗體，其中包含幾個用於輸入信息的字段。在Android平板電腦上點擊其中一個字段時，會出現軟鍵盤，它將調整窗口元素和隨後的主體元素，減去軟鍵盤的高度。這導致頁面縮小到小於300px，使表單無法使用。在iPad上，鍵盤覆蓋在頁面頂部，因此窗口高度不變。Android平板電腦上的單頁網頁應用程序高度問題

我已經發現一個部分修復，其包括設置主體高度爲等於在頁加載窗口的高度，還取決於orientationchange：

$("body").height($(window).height()); 
window.addEventListener("orientationchange",function(){ 
    $("body").height($(window).height()); 
}

這修復高度壓扁問題，並且意味着形式可以但在用戶在軟鍵盤打開時改變方向的情況下會出現問題。

在方向更改和窗口高度（和身高）更改爲高度減去鍵盤後，鍵盤保持打開狀態。當視野模糊且鍵盤消失時，身體保持高度降低並在底部具有令人討厭的白色條紋。

爲了說明問題，這裏有一些數字：

風景 - 閉合鍵盤：688px
景觀 - 打開鍵盤：273px
肖像 - 關閉鍵盤：1168px
肖像 - 開放式鍵盤：716px

如果從風景 - 打開鍵盤切換到縱向 - 打開鍵盤，然後關閉鍵盤，身高保持在716px，沿底部放置一個白色條。我需要以某種方式計算在鍵盤仍處於打開狀態時，在方向轉換點處它應該與閉合鍵盤一起使用的高度。請記住設備分辨率，應用程序鑲邊和鍵盤尺寸會有所不同。

來源

2015-01-21 khendar

您可以嘗試CSS vh單位，它是視口的百分比。

E.g. CSS

body { 
    height: 100vh; /* The body element is always 100% of the viewport's height. */ 
}

在這種情況下，您不應該需要JS事件處理程序。

來源

2015-01-21 09:21:27

不幸的是，這並沒有解決問題。因爲虛擬鍵盤打開時視口高度發生變化，所以頁面被壓扁且不可用的問題返回。 – khendar 2015-01-22 23:21:14

Android平板電腦上的單頁網頁應用程序高度問題

回答

相關問題