Ngăn chặn chế độ xem kích thước của trang web khi bàn phím ảo mềm đang hoạt động

Question

Tôi đang phát triển plugin Javascript/JQuery cho Thiết kế web đáp ứng. Nó có chức năng giám sát khung nhìn cho các thay đổi, đặc biệt là thay đổi kích thước và định hướng. Khi một thay đổi được phát hiện, một hàm gọi lại tương ứng được gọi.

Tuy nhiên, tôi nhận thấy rằng trên Android (cụ thể là sử dụng trình duyệt chứng khoán trên Google Galaxy Nexus), nếu người dùng cố sử dụng bàn phím mềm, nó sẽ thay đổi kích thước khung nhìn, do đó kích hoạt chức năng gọi lại. Đây là hành vi tôi muốn loại bỏ.

Có cách nào để - thông qua Javascript - vô hiệu hóa hành vi này hoặc phát hiện hành vi để tôi có thể thực hiện thay đổi đối với cơ sở mã để phù hợp không?

Các giải pháp mà tôi đã thấy cho đến nay phải làm chủ yếu với Phát triển ứng dụng Android và tôi không chắc chắn chúng áp dụng trong trường hợp của tôi.

Cảm ơn.

Answer 1

Ok, sau một số khó khăn xung quanh, tôi đã tìm ra giải pháp cho vấn đề của mình.

Vậy điều gì sẽ xảy ra khi bàn phím mềm được hiển thị/ẩn? Trong thử nghiệm của tôi, viewport width vẫn không đổi. Tuy nhiên, kích thước thay đổi viewport height [((current - previous)/previous)*100] khi bàn phím mềm được hiển thị bằng 43% (theo chiều dọc) và 58% (trong khổ ngang); và khi bàn phím mềm bị ẩn bởi 73% (theo chiều dọc) và 139% (theo chiều ngang) tương ứng.

Vì vậy, những gì tôi đã làm là tắt chức năng gọi lại khi các điều kiện sau đây đều đúng:

1. Thiết bị này là điện thoại di động
2. Sự thay đổi tỷ lệ chiều rộng khung nhìn là ít hơn 1%
3. Tỷ lệ thay đổi về chiều cao của chế độ xem lớn hơn 35%

Vì trình duyệt thiết bị di động không có điều khiển thay đổi kích thước như trên màn hình, tôi không tin rằng sẽ xảy ra tình huống về nơi người dùng sẽ bắt chước các điều kiện trên một cách tự nhiên.

Bạn có thể xem mẫu mã tại đây: https://github.com/obihill/restive.js/blob/master/restive.js#L4403. Thật không may, đó là một phần của một bộ mã lớn hơn, nhưng bạn sẽ có thể thu thập ý tưởng cơ bản dựa trên các điều kiện.

Chúc mừng.

Answer 2

Tôi gặp sự cố tương tự. Và giải pháp của tôi là sử dụng sự kiện thay đổi định hướng thay vì sự kiện thay đổi kích thước mà kích hoạt khi bạn ít mong đợi nó trên android: P

$(window).bind('orientationchange', function(e){ // Type pretty code here }); 

nguồn: http://www.andreasnorman.com/dealing-androids-constant-browser-resizing/