vh /% đơn vị và bàn phím trên thiết bị di động

Question

Tôi gặp sự cố với các đơn vị như vh/% cho độ cao. Khi bất kỳ input nào hoạt động, bàn phím trên thiết bị di động thay đổi chiều cao của phần tử. Tôi đang tìm giải pháp để thay đổi nó thành chiều cao tĩnh khi bàn phím đang hoạt động.

jsfiddle (mở trên thiết bị di động)

Answer 1

Vấn đề là khá straightfoward, tất cả chúng ta đã có kinh nghiệm nó trước đây. May mắn thay, tôi hiếm khi làm việc trên các trang web có các yếu tố cần phải hoàn toàn dựa trên kích thước khung nhìn, tuy nhiên khi tôi làm, tôi thích sử dụng một giải pháp jQuery để đạt được điều này.

Tôi sẽ đi ra ngoài một chi và giả sử rằng bạn chỉ cần áp dụng loại quy tắc này trên thiết bị di động, vì vậy sẽ thêm mã này vào mã.

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

Có thể chỉnh sửa chiều cao trực tiếp bằng cách thay đổi hành động để:

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

nhưng chúng tôi đặc biệt muốn ghi đè lên quy tắc CSS của bạn mà nói cái gì đó dọc theo dòng:

#my-element { height: 100vh; } 

I've edited your codepen to include my example.