智能手机浏览器的分辨率

Question

我只是好奇 Android 手机是如何专门计算响应式网页的分辨率的。例如，我知道 iPhone 5s 的原始分辨率为 640x1136，但它用于网页的分辨率为 320x568。 （所以我可以在需要时相应地测量我的设计元素——我通常使用百分比，但有时我需要以像素为单位测量元素）

那么，当 Android 手机访问响应式设计的网站时，本机分辨率为 1920x1080，网页上的元素在尺寸方面呈现的是什么？也是1/2吗？还是设备之间的不同？

我所做的测试并没有让我清楚地了解正在发生的事情。

谢谢！

Answer 1

我认为这基本上是由于每个移动设备的纵横比而不是其分辨率。智能手机变得“更高”是因为人们想要更大的屏幕，但他们的手并没有变大，于是手机屏幕的高度变大了，使得视口宽度减小以保持网页内容的舒适可读性。

假设您的示例的宽度为 1080 像素，如果视口等于设备分辨率，您将看到一个为 6 英寸智能手机屏幕中的 14 英寸笔记本电脑设计的网站，而无需提及您看到的是纵向，笔记本是横向的。

我和你有同样的疑问，在这里找到一些信息：https://webspeedtools.com/viewport-vs-screen-resolution-vs-dpr-vs-ppi/

Answer 2

根据我的经验，如果您正确构建所有内容并且只关注设备宽度，大多数情况下您可以获得所需的结果。

设备宽度是智能手机或平板电脑上像素的真实衡量标准，Retina 设备的分辨率数字通常是两倍。

结构正确意味着：

(1) 在您的文档头部包含您的元标记

<meta name="viewport" content="width=device-width, initial-scale=1.0">

您可以选择防止缩放

<meta name="viewport" content="width=device-width, user-scalable=no" />

(2) 在您的 CSS 中使用媒体查询，例如

@media (max-width: 480px) {
  ...
}

@media (max-width: 767px) {
  ....
}

@media (min-width: 768px) and (max-width: 979px) {
  ...
}

@media (min-width: 1200px) {
  ...
}  

您选择的断点并不那么重要，而是您根据像素宽度操纵屏幕显示的原则，而不是让您的生活因像素比率、分辨率、方向和其他相关细节而变得复杂。

您肯定会遇到异常，但如果您从简单开始并获得您想要的结果，那么您就可以避免尝试针对设备的滑坡，并且它有助于您的设计面向未来。

祝你好运！