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

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

jsfiddle(在移动设备上打开)

最佳答案

这个问题很直截了当，我们以前都经历过。

幸运的是，我很少在网站上需要根据视口(viewport)大小完美匹配元素的网站上工作，但是当我这样做时，我更喜欢使用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() });
    }
});

可以通过将 Action 更改为以下内容来直接编辑高度:

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

但我们特别想覆盖您的CSS规则，该规则规定了以下内容:

#my-element { height: 100vh; }

I've edited your codepen to include my example。

关于css - vh/移动设备上的％单位和键盘，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39897564/