有在iOS 7視口高度的單位的bug修復（iPhone和ipad許多JavaScript），本文將討論如何解決這個錯誤的CSS。這個bug影響視口高度的單位，繪制為例：如果你嘗試用高度充分視口高度：100vh容器，它會顯示一個很高的空隙。雖然這個bug被固定在iOS 8，但許多舊iPhone和ipad用戶仍在使用舊的iOS 7。VH單元buggyfill是一種流行的JavaScript的解決方法，但是如果你不想依賴于JavaScript，這里是一個使用CSS媒體查詢的快速修復。

CSS定位

修復很簡單。在你需要100vh元素，只是元素高度匹配使用媒體查詢目標的iPhone和ipad的分辨率版本的裝置高度。我從themify主題和流程了解這個編碼的CSS技巧；和設備的斷點從本網站引用。

/* fix iOS bug not displaying 100vh correctly */
/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
.fullheight {
height: 768px;
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.fullheight {
height: 1024px;
}
}
/* iphone5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-
pixel-ratio: 2) {
.fullheight {
height: 320px;
}
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-
pixel-ratio: 2) {
.fullheight {
height: 568px;
}
}
/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-
device-pixel-ratio : 2) {
.fullheight {
height: 320px;
}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-
device-pixel-ratio : 2) {
.fullheight {
height: 480px;
}
}