screen.width/screen.height屏幕旋轉後不更新

我在iPhone設備（iPhone 7，iOS 10，但也是其他iPhone）上遇到此問題：在javascript中，如果攔截orientationchange事件，處理程序，screen.width和screen.height保持不變（與旋轉之前一樣）。screen.width/screen.height屏幕旋轉後不更新

因爲這取決於從視口設置，這是我的視口是如何在HTML文件中聲明：

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

一切正常，在Chrome的模擬可視化。

在此先感謝您的幫助。

來源

2017-06-11 Gabriele D' Antona

iPhone，Safari或Chrome的瀏覽器是什麼？ – George

我使用的是Safari，我沒有使用Chrome進行測試。 –

我們可以使用'jquery'嗎？ –

據我所知屏幕寬度/高度不會在設備旋轉後改變。要檢查是否裝置被旋轉，你可以讀取這些屬性

window.orientation：從0此值變化到+ 90/-90
window.innerHeight/innerWidth：此值被交換
document.documentElement.clientHeight/clientWidth：這個值被交換

不幸的是，這種行爲是不是C在所有Android/iOS/Window設備上保持一致。我認爲在this的數字是相當的解釋。

來源

2017-06-15 08:40:19 dloeda

'window.orientation'可以**在iPad上** 180 **顛倒時。 –

iOS用於返回屏幕大小，就好像它是肖像一樣。他們在iOS 8上（在本機類上）改變了它，但他們可能忘記爲Safari做這些事情，或者他們爲了兼容性而保留它。

如果你想基於取向的真實大小，您可以使用 window.innerWidth和window.innerHeight

我得到相同的價值觀有或無視窗meta標籤

它工作正常，在Chrome模擬可視化，因爲它它應該是返回模擬可視化的屏幕大小，但它不會模擬基於設備應該運行的操作系統，因此您不會獲得與真實設備上相同的值（在這種情況下其中真實設備不會返回好值）

來源

2017-06-15 15:09:20 jcesarmobile

jQuery mobile有處理方向改變事件的onOrienntetionChange事件，並且有$(window).orientationchange();函數可以手動改變方向。

來源

2017-06-21 10:02:48

CSS無法檢測到方向更改。

使用JavaScript獲取方向更改。

添加功能

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

這將在方向改變時加一個event Handler到window改變body的width。

關於orientationchange的更多參考文獻

來源

2017-06-21 12:09:56

screen.width/screen.height屏幕旋轉後不更新

回答

相關問題