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

时间:2016-10-06 13:36:59

标签: css css3

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

jsfiddle(在移动设备上打开)

1 个答案:

答案 0 :(得分:2)

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

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