智能手机浏览器的分辨率

Posted 2023-02-21

【中文标题】智能手机浏览器的分辨率

【英文标题】：Resolution of smartphone browsers

【发布时间】：2014-08-11 10:30:48

【问题描述】：

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

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

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

谢谢！

【问题讨论】：

如果你使用 Chrome，你可以使用 dev tools 设备模拟器获取不同设备的分辨率和像素比。您还可以按像素密度引用此显示列表：en.wikipedia.org/wiki/List_of_displays_by_pixel_density（查看 CSS 像素比列）

@SeanHenderson - 这是一个我不知道存在的美妙资源！这真的为我解开了 CSS 如何解释这些维度的谜团。谢谢

【参考方案1】：

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

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

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

【参考方案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) 
  ...
  

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

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

祝你好运！

【讨论】：

当您提到它不应该与设备有关，而应与给定像素内的设计上下文有关时，我认为您确实做到了。实际上，就设备及其分辨率而言，断点并不重要。谢谢！

感谢@alanvitek，很高兴这有助于为您澄清问题