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

Question

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

jsfiddle (在移动设备上打开)

Answer 1

这个问题很简单，我们以前都经历过。

幸运的是，我很少在需要根据视口(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() }); 
    }
});

可以通过将操作更改为直接编辑高度:

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

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

#my-element { height: 100vh; }

I've edited your codepen to include my example .