如何確定iOS上的實際視口寬度和高度

我一直被困在如此簡單的任務中，比如當頁面被用戶放大時確定iOS上的頁面寬度和高度。如何確定iOS上的實際視口寬度和高度

的問題是，一些網站有奇怪的佈局，看起來像這樣：

這是一個不縮放頁面，它具有1164x1811像素分辨率，這是正確的。我從window.innerWidth和window.innerHeight得到這些值。突出顯示的區域是一個正文元素，它的分辨率爲1024x1594像素，這很重要。

接下來我用捏到變焦來放大頁面，這是它的外觀：

現在，當我試圖讓頁面大小，我從window.innerWidth和window.innerHeight分別1024x1594像素。這些值與機身尺寸完全相同。

所以問題是如何獲得正確的頁面大小，無論是否縮放。

我已經在Chrome中測試了這個特殊情況，並得到了正確的結果：無論縮放，它總是1164x1811像素。

來源

2017-08-16 nicholas_r

請問您是否首先在瀏覽器中檢查您的URL。使用響應式網址使其正常工作。 – Rex

@rex的事情是，我應該能夠確定視口大小，而不管移動/桌面表示頁面，所以切換到響應式不是選項 –

編輯：使用document.body.clientWidth和document.body.clientHeight得到你想要的計算，因爲我原來的解決方案現在已經過時了。

您可以使用 ~~document.width和 document.height~~ 檢索iOS上的Safari瀏覽原網頁大小，即使你捏縮放。

以下是對舊Space Jam site（想到一個肯定無法響應的網站時想到的）的測試。

來源

2017-08-23 14:13:01

奇怪，這些屬性在iOS 10.3上是未定義的。這些都被標記爲過時的規格:( –

@nicholas_r你是絕對正確的 - 我的iOS模擬器設置爲9.我得到undefined在10，請保持！ –

@nicholas_r更新我的答案 - 請使用'文件.body.clientWidth'和'document.body.clientHeight'在放大時獲取文檔的原始尺寸。在iOS 10.3中成功測試。 –

下面是一個更爲複雜的，但有點沒用方式：做那麼頁面大小的元素計算/獲取它的實際大小。

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

來源

2017-08-26 17:38:27

這就是我已經結束了，並且在所有情況下都不起作用，尤其是在問題中提供的情況下，您可以嘗試通過從iOS設備導航到habrahabr.ru並切換到桌面版本的站點 –

如何確定iOS上的實際視口寬度和高度

回答

相關問題