Question

我对vh / %等单位的高度有疑问。当任何input处于活动状态时，移动设备上的键盘会更改元素高度。我正在寻找解决方案，在键盘处于活动状态时将其更改为静态高度。

jsfiddle（在移动设备上打开）

Answer 1

这个问题非常直接，我们以前都经历过这个问题。

幸运的是，我很少在具有需要根据视口大小完美匹配的元素的网站上工作，但是当我这样做时，我更喜欢使用jQuery解决方案来实现这一点。

我将走出困境并假设您只需要在移动设备上应用此类规则，因此我将把它添加到代码中。

jQuery(document).ready(function($){ //wait for the DOM to load
    if($(window).width() > 640) { //check if screen width is less than 640px (i.e. mobile)
        $('#my-element').css({ 'height' : $(window).height() }); 
    }
});

可以通过将操作更改为：

来直接编辑高度

$('#my-element').height($(window).height());

但我们特别希望覆盖您的CSS规则，其中包含以下内容：

#my-element { height: 100vh; }

I've edited your codepen to include my example

移动设备上的vh /％单位和键盘

1 个答案: