景觀100％的車身高度溢出由於按鈕欄

考慮以下頁面：景觀100％的車身高度溢出由於按鈕欄

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
     html, body 
     { 
      padding: 0; 
      margin: 0; 
      height: 100%; 
     } 
    </style> 
</head> 
<body> 
</body> 
</html>

載入到iPhone上的Safari瀏覽器。該頁面呈現100％的高度。現在將iPhone轉爲橫向並向上拖動頁面。出現（底部）按鈕欄，現在我們按照按鈕欄偏移內容的量上下滾動頁面。頁面高度不再是100％，並且應該可見的內容位於按鈕欄下方，並且垂直滾動條顯而易見。

是否有可能消除這種煩惱，並得到真 100％身高？

來源

2014-05-06 spender

您是否總是希望它在景觀中達到100％的高度？ – Fizzix

最後通過頭部部分中的meta指令解決了這個問題，這使得底部按鈕欄的外觀顯得不那麼激進。注意最後一部分（minimal-ui）

<meta name="viewport" 
content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui">

來源

2014-05-08 18:30:58 spender

[自iOS 8以來]不再有效（https://developer.apple.com/library/content/releasenotes/General/RN-iOSSDK-8.0/）。 – Shiva127

使用這個腳本添加一個類html如果它是一個iPhone：

if((navigator.userAgent.match(/iPhone/i))) { 
    $('html').addClass('iphone'); 
}

然後嘗試使得其位置固定，但只有當方向爲橫向，像這樣：

@media (orientation:landscape) { 
    html.iphone > body { 
     position: fixed; 
     bottom: 0; 
     width:100%; 
     height: 480px !important; /* pretty sure its 480px? */ 
    } 
}

來源

2014-05-06 23:16:46 Fizzix

景觀100％的車身高度溢出由於按鈕欄

回答

相關問題