有在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;
}
}