html - 在响应式设计方面，你如何处理高分辨率手机，比如 Galaxy S4？

Question

从历史上看，您会使用基于像素宽度的媒体查询来确定最终用户将获得什么显示。但是，当您使用更高分辨率的设备（如 Galaxy S4 (1080x1920) 分辨率）时，这不起作用/不会起作用。

你怎么处理这个？

score 25 · Accepted Answer

是什么让您认为媒体查询不起作用？

显然，Galaxy S4 的 CSS 像素比是 3.0，因此，虽然它的物理分辨率是 1080x1920，但它的 CSS 分辨率仍然是 360x640——类似于 Galaxy S3。

还有一些测试像素密度的媒体查询。它们可以帮助您将高分辨率图片或矢量图形提供给 hi-dpi 设备。

另外，看看这篇文章：

令人敬畏的屏幕规格数据库

score 7 · Accepted Answer

不确定您使用什么框架进行响应式设计，但使用 Bootstrap 我将其添加到<head>它并为我工作：

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

这里有一些很好的信息：

具体来说，“视口”主题下的部分解决了您的问题。

2 回答 2