Cách xác định chiều rộng và chiều cao của chế độ xem thực tế trên iOS

Question

Tôi đã bị kẹt với nhiệm vụ dễ dàng như xác định chiều rộng và chiều cao của trang trên iOS khi trang được thu phóng bởi người dùng.

Vấn đề là một số trang web có bố cục lạ và trông như thế này:

Đây là một trang không thu nhỏ lại và nó có độ phân giải 1164x1811 pixel và đó là chính xác. Tôi có các giá trị này từ window.innerWidth và window.innerHeight. Vùng được đánh dấu là phần tử nội dung và có độ phân giải 1024x1594 pixel, điều đó quan trọng.

Tiếp theo, tôi sử dụng pinch-to-zoom để phóng to trang trong và đây là cách có vẻ:

Bây giờ, khi tôi cố gắng để có được kích thước trang tôi đã 1024x1594 pixel từ window.innerWidth và window.innerHeight tương ứng . Những giá trị này chính xác giống với kích thước cơ thể.

Vì vậy, câu hỏi đặt ra là làm thế nào để có được kích thước trang phù hợp cho dù có thu phóng hay không.

Tôi đã thử nghiệm trường hợp cụ thể này trong Chrome và nhận kết quả chính xác: luôn là 1164x1811 pixel bất kể thu phóng.

Answer 1

CHỈNH SỬA: Sử dụng document.body.clientWidth và document.body.clientHeight để nhận các tính toán bạn mong muốn, vì giải pháp ban đầu của tôi hiện được coi là lỗi thời.

Bạn có thể sử dụng document.width và document.height để truy xuất kích thước trang gốc trên iOS Safari, ngay cả khi bạn đã thu nhỏ kích thước.

Đây là một thử nghiệm trên số Space Jam site cũ (mà bạn nghĩ đến khi cố nghĩ đến một trang web chắc chắn sẽ không đáp ứng được).

Answer 2

Đây là một cách phức tạp hơn nhưng kinda vô dụng: Thực hiện một yếu tố trang có kích thước sau đó tính toán/nhận được kích thước thực tế của nó.

let page_size = { height: null, width: null }; 
{ 
    let div = document.createElement('div'); 
    (styles => Object.keys(styles).forEach(k => div.style[k] = styles[k]))({ 
     height: '100vh', width: '100vw', 
     position: 'fixed', 
     top: '-100vh', left: '-100vw' 
    }) 
    document.body.appendChild(div); 
    page_size.height = div.offsetHeight; 
    page_size.width = div.offsetWidth; 
}