Trình duyệt di động không kích hoạt sự kiện thay đổi kích cỡ khi ẩn thanh địa chỉ

Question

Tôi có hai phần trên trang web của mình, có chiều cao mà tôi đặt là window.innerHeight. Khi sự kiện thay đổi kích thước được kích hoạt, chiều cao được cập nhật.

Điều này hoạt động hoàn hảo trên máy tính để bàn của tôi, nhưng trên điện thoại Android của tôi, tôi gặp một số vấn đề.

Trong Chrome dành cho Android, nếu bạn cuộn xuống để thanh địa chỉ bị ẩn và kích thước cửa sổ thay đổi, Chrome sẽ kích hoạt sự kiện đổi kích thước và chiều cao được cập nhật.

Firefox và trình duyệt android mặc định không kích hoạt sự kiện thay đổi kích thước này sau khi ẩn thanh địa chỉ. Nếu tôi thay đổi hướng của thiết bị theo cách thủ công từ dọc sang ngang và quay lại chiều cao được cập nhật như mong muốn.

Vì vậy, tôi đã cố gắng gửi một sự kiện orientationchange chính mình, nhưng điều này không hiệu quả.

Có cách nào để Firefox và trình duyệt mặc định hoạt động như Chrome không?

Đây là website.

Answer 1

Thực tế là các trình duyệt di động (thử nghiệm Android/Chrome iO/Safari), khi chuyển đổi thanh địa chỉ, chỉ kích hoạt sự kiện resize sau khi người dùng tắt ngón tay khỏi màn hình.

Tuy nhiên, chúng tôi có thể sử dụng sự kiện touchmove, khiến trình duyệt ẩn hoặc hiển thị thanh địa chỉ ở vị trí đầu tiên. Trong trình xử lý, chúng tôi có thể sử dụng thuộc tính window.innerHeight để phát hiện các thay đổi về chiều cao của chế độ xem. Sử dụng jQuery:

$(window).on('resize touchmove', function() { 
    // adjust heights basing on window.innerHeight 
    // $(window).height() will not return correct value before resizing is done 
}); 

Nó không hoàn hảo, nhưng tuy nhiên đó là giải pháp làm việc duy nhất tôi đã đưa ra.

Toàn bộ hành vi rất kỳ quặc, bởi vì ngay cả các yếu tố được tạo kiểu bằng cách sử dụng position: fixed sẽ chỉ được vẽ lại sau khi chạm xong.

Ngoài ra, nếu chức năng điều chỉnh gây ra độ trễ, trình xử lý có lẽ sẽ bị xóa.