iPad Safari 100％高度問題

我在我的頁面上有一個模態div，它使背景變灰。如果我將覆蓋div的高度設置爲100％，它可以在IE（桌面）上正常工作，但在iPad Safari上，整個高度不會變灰。究竟是什麼問題？它與固定位置/視口有關嗎？請幫忙。以下是同樣的CSS;iPad Safari 100％高度問題

#TB_overlay { 
    height: 100%; 
    left: 0; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 100; 
} 
.TB_overlayBG { 
    background-color: #000000; 
    opacity: 0.4; 
}

來源

2011-04-20 testndtv

查看我對類似問題的回答，可能會有所幫助http://stackoverflow.com/questions/8205812/jquery-js-ios-4-and-document-height-problems – 2013-03-30 11:43:56

您好最簡單的方法，這就是我給它做的最大高度寬度的覆蓋。像：

.overlay{ 
position: fixed; 
display: none; 
top: 0; 
left: 0; 
z-index: 99; 
width: 10000px; 
height: 10000px; 
opacity: 0.5; 
background: #ccc; 
}

可以前body標籤底部，即把這個，每當你要灰的背景改變其display到block。很顯然，無論你想在其上展示什麼，都必須有更大的z-index。希望這可以幫助。如果你不明白，讓我知道。

來源

2011-04-20 11:42:33

這個工作是否適用於桌面和iPad都不錯，它會不會創建一個大的滾動條，因爲我們正在使用一個很大的高度。 – testndtv 2011-04-20 11:48:46

它的工作原理並不會創建一個滾動條，因爲位置是固定的。你可以試試看。 – 2011-04-20 11:51:01

我需要使用position：fixed; OR位置：絕對;覆蓋div？ – testndtv 2011-04-20 12:01:04

設備高度和寬度需要進行設置，你可以使用iPad的特定樣式來實現這一點，所以它不會破壞你的其他瀏覽器。

參考：http://css-tricks.com/snippets/css/ipad-specific-css/

在沒有看到它，它很難說什麼問題，但嘗試使用上述CSS特定CSS適用於iPad的Safari瀏覽器。

來源

2011-04-20 11:37:55

即使設置了所有維度，也很難由於視口，確定並查詢移動瀏覽器中的高度和寬度。 Viewport與「普通」（桌面）瀏覽器上的窗口大小不同。這就是爲什麼'position：fixed;'在移動瀏覽器上無法正常工作的原因。 – Rudie 2011-04-20 11:41:55

@Rudie，+1。相當多的數學是必需的。在iOS中，我們也有不同dpi的問題（iPhone4更高）。在Android瀏覽器中，我們可以讀取dpi數字並在那裏進行數學運算。 – 2011-04-20 11:51:18

所以你基本上是說動態地確定設備高度並相應地設置覆蓋div的高度是不可能的？有沒有其他方法？ – testndtv 2011-04-20 13:15:43

您的問題：

大多數移動瀏覽器忽略position:fixed
窗口大小和視大小不同的處理，所以position:absolute;...招不也行 - 你必須動態地調整您div通過讀取視口的大小或使其足夠大以覆蓋所有可能的頁面大小

來源

2011-04-20 11:48:51

iPad Safari 100％高度問題

回答

相關問題