我对vh
/ %
等单位的高度有疑问。当任何input
处于活动状态时,移动设备上的键盘会更改元素高度。我正在寻找解决方案,在键盘处于活动状态时将其更改为静态高度。
jsfiddle(在移动设备上打开)
答案 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; }