vh/移动设备上的％单位和键盘 [英] vh / % units and keyboard on mobile devices

问题描述

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

I have problem with units like vh / % for heights. When any input is active, keyboard on mobile devices change elements height. I'm looking for solution to change it to static height when keyboard is active.

jsfiddle (在移动设备上打开)

jsfiddle (open on mobile device)

推荐答案

问题很直接，我们以前都曾经历过.

The issue is quite straightfoward, we've all experienced it before.

幸运的是，我很少在网站上需要根据视口大小完美匹配元素的网站上工作，但是当我这样做时，我更喜欢使用jQuery解决方案来实现这一目标.

Luckily I rarely work on websites that have elements that need to fit perfectly based on the viewport sizes, however when I do, I prefer to use a jQuery solution to achieve this.

我要大步走出去，假设您只需要在移动设备上应用这种类型的规则，因此要将其添加到代码中.

I am going to go out on a limb and assume that you only need to apply this type of rule on mobile, so am going to add this to the code.

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

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

It is possible to edit the height directly by changing the action to:

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

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

but we specifically want to overwrite your CSS rule that stated something along the lines of:

#my-element { height: 100vh; }

我已经编辑了您的Codepen以包含我的示例.

这篇关于vh/移动设备上的％单位和键盘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！