iPhone 6是否仍然在縱向和橫向上報告相同的寬度？

我似乎無法找到答案，並且我無法訪問iPhone 6或6 Plus。iPhone 6是否仍然在縱向和橫向上報告相同的寬度？

所有以前的iOS設備將始終將它們的寬度報告爲縱向模式下設備的寬度，即使他們知道它們處於橫向模式。我想知道是否需要爲新設備使用新的屏幕尺寸創建更具體的媒體查詢，或者是否最終在橫向模式下報告正確的寬度。

謝謝！

我要補充，我要求主要是在CSS媒體查詢，當我們檢查width或device-width方面。例如，較舊的iOS設備在縱向和橫向模式下都會報告device-width爲768px。

2014-12-19 LubosB

您是否嘗試過使用Chrome開發人員工具來模擬iPhone 6/6 Plus？ – Xenyal 2014-12-19 04:45:27

我現在不太相信他們的設備模式（我在這裏有另一個關於我遇到的錯誤的帖子），但我會給它一個鏡頭。 – LubosB 2014-12-19 04:49:59

只是爲了跟進，我確實有第三代iPad，當我在http://quirksmode.org/m/tests/widthtest.html打開屏幕尺寸測試時，我獲得了980像素的相同寬度肖像和風景。在設備模式下模擬它並進入同一頁面，我會得到不同的值（在完美的世界中應該是正確的）。但正如我懷疑的那樣，它並沒有完全模仿我實際獲得的設備。 – LubosB 2014-12-19 05:01:59

關於iOS的具體問題，確定設備視口寬度的最佳做法是使用CSS orientation媒體查詢。 768px只適用於較老的iPad。下面是你應該爲每個設備實例使用的查詢列表：

iPhone 6：

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { /* STYLES GO HERE */}

iPhone 6加：

@media only screen 
and (min-device-width : 540px) 
and (max-device-width : 960px) { /* STYLES GO HERE */}

如果你希望你的CSS要應用特定於縱向或橫向的上下文，那麼您需要添加一個orientation查詢以及那個特定的情況。

來源

2014-12-19 20:56:09 Xenyal

嗨Xenyal，我有一個腳本，首先獲取任何設備查看頁面的方向，然後運行基於'min-'和'max-width'的媒體查詢。問題是，iOS設備在寬度上撒謊（縱向或橫向相同）。我的腳本正在嘗試爲設備加載最合適的背景圖像，所以我確實已經爲我們提供了針對老式iOS設備的專門查詢，但我想知道iPhone 6是否繼續這一傳統 - 報告縱向和橫向模式下的寬度相同 - 或者如果我的通用，全部捕捉查詢都可以工作。 – LubosB 2014-12-20 00:36:46

@LubosB腳本在Javascript中？關於iPhone 6/6Plus，其寬度確實不會因其方向而改變。因此，理想的解決方案是針對您的案例查詢包含「orientation」和「width」。 – Xenyal 2014-12-22 15:18:43

感謝您的確認。是的，JS，所以也許我只會寫一個類似'if（orientation == landscape && width LubosB 2014-12-22 16:50:15

iPhone 6是否仍然在縱向和橫向上報告相同的寬度？

回答

相關問題