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

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

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

祝你好运！

解决智能手机浏览器

1 个答案: