iPhone Safari 縮放分辨率

Question

我是網頁設計領域的新手，我已經開始使用 HTML 和 CSS。 我已經從頭開始構建自己的網站，目前我對設計如何跨不同平台進行擴展感到困惑。

在 iPhone 7 上查看我的網站時，該網站在網上列出的分辨率為 750 x 1334，我的內嵌塊圖像能夠以 2 行的形式並排放置。我不明白這是怎么可能的它們的高度和寬度設置為 400 像素。 我附上了來自 chrome 開發工具的開發人員屏幕截圖以進一步顯示。 顯示問題的開發人員工具

我對 iPhone 如何顯示內容有誤解嗎？ 如果最大寬度分辨率為 750 像素（根據 chrome 開發工具僅為 375 像素...），它如何並排顯示 2 400 像素的圖像？

Answer 1

iPhone 具有“Retina 顯示屏”，其屏幕分辨率高於您在開發工具中看到的“邏輯”分辨率。

圖像（整個屏幕的內容）首先被光柵化，然后下采樣到屏幕分辨率，然后顯示在物理屏幕上。

對於 iPhone 7 型號（以及 6 和 8），比例因子為 2。這些型號的屏幕分辨率為 750x1334，邏輯分辨率為 375x667。 你可以找到其他機型的分辨率在這里和更多的細節在這里。

至於在 375px 屏幕上並排顯示的 2 張寬度為 400px 的圖像似乎是視口縮放“問題”。 屏幕截圖上看不到 html 的 ，但是 上的“jumbotron”類表明您使用了引導程序。 也許您在設置引導程序時無意中設置了視口。