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

CSS定位

修復(fù)很簡(jiǎn)單。在你需要100vh元素，只是元素高度匹配使用媒體查詢(xún)目標(biāo)的iPhone和ipad的分辨率版本的裝置高度。我從themify主題和流程了解這個(gè)編碼的CSS技巧；和設(shè)備的斷點(diǎn)從本網(wǎng)站引用。

/* 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;
}
}