由于是新手,所以我无法对其他答案发表评论。
如果有人正在寻找使之可行的答案(并且可以使用javascript-目前似乎需要使用javascript),这种方法对我来说效果很好,并且它也说明了移动方向的变化。我将Jquery用于示例代码,但应该可以与vanillaJS一起使用。
-首先,我使用脚本来检测设备是触摸还是悬停。裸露的例子:
if ("ontouchstart" in document.documentElement) {
document.body.classList.add('touch-device');
} else {
document.body.classList.add('hover-device');
}
这根据设备类型(悬停或触摸)将类添加到body元素,以后可用于高度脚本。
-接下来使用此代码设置设备在负载和方向变化时的高度:
if (jQuery('body').hasClass("touch-device")) {
//Loading height on touch-device
function calcFullHeight() {
jQuery('.hero-section').css("height", $(window).height());
}
(function($) {
calcFullHeight();
jQuery(window).on('orientationchange', function() {
// 500ms timeout for getting the correct height after orientation change
setTimeout(function() {
calcFullHeight();
}, 500);
});
})(jQuery);
} else {
jQuery('.hero-section').css("height", "100vh");
}
-设置超时,以便设备可以在方向更改时正确计算新高度。如果没有超时,以我的经验,高度将不正确。500ms可能过大,但对我有用。
如果浏览器覆盖CSS 100vh,则悬停设备上的-100vh是后备。