vh /％單位和移動設備上的鍵盤

Question

我對於高度單位如vh/%有問題。當任何input處於活動狀態時，移動設備上的鍵盤會更改元素高度。我正在尋找解決方案，以便在鍵盤處於活動狀態時將其更改爲靜態高度。

jsfiddle（在移動設備上打開）

Answer 1

的問題是相當straightfoward，我們都經歷過了。

幸運的是，我很少工作的網站上的元素需要根據視口大小完美匹配，但是當我這樣做時，我更願意使用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。