iPhone Safari 缩放分辨率答案

【问题标题】：iPhone Safari scaling resolutioniPhone Safari 缩放分辨率
【发布时间】：2018-02-11 19:21:52
【问题描述】：

我是网页设计领域的新手，我是从 HTML 和 CSS 开始的。我从头开始构建自己的网站，目前对设计如何跨不同平台进行扩展感到困惑。

在网上列出的分辨率为 750 x 1334 的 iPhone 7 上查看我的网站时，我的内嵌块图像能够以 2 行并排放置。我不明白这是怎么回事当它们设置为具有 400 像素的高度和宽度时是可能的。我附上了来自 chrome 开发工具的开发者截图以进一步展示。 Developer tools showing the issue

我对 iPhone 如何显示内容有误解吗？如果最大宽度分辨率是 750 像素（根据 chrome 开发工具只有 375 像素...），它如何能够并排显示 2 400 像素图像？

【问题讨论】：

听起来您的视口正在缩小而不是适应。你有viewport <meta> tag 设置吗？你有media queries吗？
不，我两个都没有。尚未进行响应式设计尝试。我试图首先了解为什么默认系统的行为方式会如此。

标签： html ios css iphone safari

【解决方案1】：

iPhone 具有“Retina 显示屏”，其屏幕分辨率高于您在开发工具中看到的“逻辑”分辨率。

图像（整个屏幕的内容）首先被光栅化，然后被下采样到屏幕分辨率，然后显示在物理屏幕上。

对于 iPhone 7 型号（以及 6 和 8），比例因子为 2。这些型号的屏幕分辨率为 750x1334，逻辑分辨率为 375x667。您可以找到其他型号的分辨率here 和更多详细信息here。

至于 2 个宽度为 400px 的图像显示在 375px 屏幕上并排显示，这似乎是视口缩放“问题”。屏幕截图上看不到 html 的，但上面的“jumbotron”类表明您使用了引导程序。也许您在设置引导程序时无意中设置了视口。

【讨论】：