screen.width/screen.height không cập nhật sau khi xoay màn hình

Question

Tôi đang gặp sự cố này trên thiết bị iPhone (iPhone 7, iOS 10, nhưng cũng có các iPhone khác): trong javascript, nếu tôi chặn sự kiện orientationchange, bên trong trình xử lý, screen.width và screen.height vẫn giữ nguyên (như trước khi quay).

Vì đây có thể phụ thuộc từ các thiết lập khung nhìn, đây là cách khung nhìn của tôi được khai báo trong file .html:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no" /> 

Tất cả mọi thứ hoạt động tốt trong hình dung mô phỏng của Chrome.

Cảm ơn trước sự giúp đỡ của bạn.

Answer 1

Theo như tôi biết màn hình chiều rộng/chiều cao sẽ không thay đổi trong thiết bị sau khi xoay. Để kiểm tra xem thiết bị có thể xoay, bạn có thể đọc các tài sản

1. window.orientation: thay đổi giá trị này từ 0 đến + 90/-90
2. window.innerHeight/innerWidth: giá trị này được hoán đổi
3. document.documentElement.clientHeight/clientWidth: giá trị này được hoán đổi

Thật không may, hành vi này không phải là c phù hợp trên tất cả các thiết bị Android/iOS/Window. Tôi nghĩ rằng trong con số this là khá giải thích.

Answer 2

iOS được sử dụng để trả lại kích thước của màn hình như thể nó đang ở chế độ dọc. Họ đã thay đổi nó trên iOS 8 (trên các lớp gốc), nhưng họ có thể đã quên làm điều đó cho Safari, hoặc có thể họ giữ nó theo cách đó để tương thích.

Nếu bạn muốn kích thước thực dựa trên định hướng bạn có thể sử dụng window.innerWidth và window.innerHeight

tôi nhận được các giá trị tương tự có hoặc không có thẻ meta viewport

Nó hoạt động tốt trên Chrome trực quan mô phỏng bởi vì nó trả về kích thước màn hình của hình ảnh mô phỏng, vì nó phải là, nhưng nó không mô phỏng hệ điều hành mà nó sẽ chạy dựa trên thiết bị, vì vậy bạn sẽ không nhận được các giá trị giống như trên một thiết bị thực (trong trường hợp này trong đó thiết bị thực không trả về các giá trị tốt)

Answer 3

Điện thoại di động jQuery có sự kiện onOrienntetionChange xử lý sự kiện thay đổi hướng và có chức năng $(window).orientationchange(); để thay đổi hướng thủ công.

Answer 4

CSS không thể phát hiện thay đổi định hướng.

Sử dụng JavaScript để thay đổi hướng.

Thêm chức năng như

window.addEventListener("orientationchange", function() { 
    document.body.style.width = window.innerWidth; 
}); 

này sẽ thêm một event Handler để window để thay đổi width của body khi định hướng được thay đổi.

Tham khảo khác trên orientationchange