智能手机浏览器的分辨率

Question

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

那么，当 Android 手机访问响应式设计的网站，并且原生分辨率为 1920x1080 时，网页上的元素在尺寸方面会被渲染成什么？也是1/2吗？还是设备之间有不同？

我所做的测试并没有让我清楚地了解发生了什么。

谢谢！

Answer 1

根据我的经验，大多数时候，如果你正确地构建所有内容并只关注设备宽度，你就可以获得你想要的结果。

设备宽度是智能手机或平板电脑上像素的真实度量，对于视网膜设备，分辨率数字通常是两倍。

正确的结构意味着：

(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) {
  ...
}  

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

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

祝你好运！

Answer 2

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

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

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

Answer 3

本网站最好在 Firefox 29+ 和 Chrome 34+ 中以 1024 x 768 分辨率浏览。 设计和主办：国家信息中心 - UP State Unit，