CSS：廣泛支持視圖高度（vh）和視圖寬度（vw）單位嗎？

Question

我正在使用100vh垂直居中div與行高。 This site支持vh和vw在70％左右，這是一個公平的評估？您會在建立網站時建議使用視口單元嗎？我知道這有點主觀，我只是尋找比我更有經驗的網絡開發人員的意見。

編輯：感謝大家的輸入，我希望它在移動設備上看起來不錯，所以我想我'必須放棄vh。

Answer 1

以我的觀點來看，統計顯然是一個公平的評估。

我認爲這個決定必須由你來決定。如果你想用未來最好的技術來保護你的網站，但是意識到目前有一些垮臺，那麼很好，那就去做吧。

如果您不打算多投入一些網上業務，那麼堅持以前的做法並不意味着錯誤。

編輯：當我想創建一個響應式設計時，我首先開始爲移動設備開發，然後創建桌面版本，以確保我的視口全部正常工作，因爲Mobile支持在某些點（特別是vmax） 。但關於這個，你可以問50個人，他們都會說別的東西的機會都很好。

Answer 2

那麼，你可以看到它已經存在桌面瀏覽器，並且移動設備上的支持非常有限。所以它實際上取決於您是要創建一個在電腦上看起來不錯的網站，還是一個在手機上工作的更兼容的基於像素的網站。

Answer 3

您真的需要請聯繫answers your question的頁面。

這取決於您需要支持哪些瀏覽器。

IE9中的部分支持是指支持「vm」而不是「vmin」。 iOS7中的部分支持是由於vh單元的錯誤行爲。所有其他部分支持是指不支持「vmax」單位。

這表明在iOS7中使用視口單元可能是'錯誤的'。我不會推薦使用視口單元，而是使用：

• 像素：例如height: 500px;
• 百分比：例如height: 50%;

這些值得到了廣泛支持，並將產生最佳結果。

Answer 4

同時使用CSS vh和jQuery，更安全。
jQuery的例子：

var clientHeight = $(window).height(); 
    $('.element').css('height', clientHeight); 

和CSS：

.element {height: 100vh;} 

Answer 5

視口單位是偉大的，但大多數移動瀏覽器廠商設法使vh不可用在實踐中。

當您開始滾動或更改滾動方向時，地址欄將消失或返回;那麼你停下來，放開你的手指，vh價值將突然與任何使用它的元素一起更新，導致用戶體驗噩夢（用戶不希望在滾動結束時調整大小，改變現有元素的比例，重新佈局內容，等等）。