從底部截取的主屏幕網絡應用程序

Question

我正在用jQuery Mobile爲iPad橫向打造移動應用程序。頁面爲1024px到768px。當我在桌面（Chorome，Safari，Firefox）上查看它時，它應該呈現（1024x768）。

但是，在將它保存到iPad（iOS 8）上的主屏幕並將其打開後，頁面呈現爲從底部裁剪（大約20像素）。當我從檢查員那裏檢查它時，發現html元素（其高度爲99.9％）呈現爲747px的高度。 body元素也是如此。

我試圖給像素值的高度，邊距，填充和所有，但一些更大的容器似乎是剪輯它們。

我也嘗試了一些與@viewport規則的東西，但沒有出來。

任何想法，爲什麼發生這種情況，我該如何解決這個問題？

Answer 1

看來問題是關於狀態欄。在默認模式下，iOS會將狀態欄下的所有HTML文件拉出來，但將視口大小設置爲留出空間（height: 748px）。所以748px下方的空格將留空，以顯示白色背景。

當我將在我的HTML文件的頭部下方的線條，問題解決了（視口高度爲768px -landscape）

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 

我然後與內容屬性不同的值試過首先用content="black"，然後用content="default"。在後者中，它與沒有元標記一樣。隨着content="black"，底部再次留空，但這次的背景顏色爲黑色。