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

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

我已经编辑了您的 codepen 以包含我的示例。