实际移动分辨率答案

【问题标题】：Actual Mobile Resolution实际移动分辨率
【发布时间】：2013-09-30 09:52:42
【问题描述】：

我是 HTML5 和 CSS3 的新手，所以我正在做一个简单的项目来更好地学习它。我最近发现了响应式设计，所以我正在创建一个可以扩展到我的手机的页面。我使用媒体查询，我创建了两种状态，一种用于屏幕 640 像素（移动）和更小，另一种用于屏幕 641 像素和更大（桌面）。该网站运行良好，当我缩放窗口时在我的桌面上显示正确的样式，当我在手机上查看时显示正确的样式。

但是，在运行该网站后，我决定检查我的 HTC One 的分辨率 - 它是 1080p。无论方向如何，我的手机都会显示 640 像素的网站。我想知道为什么会这样；手机的高分辨率不应触发移动状态，但确实如此。我想我可能会对决议的实际工作方式感到困惑。

那么，我如何确定手机（和平板电脑）的真实分辨率，以便为它们创建适当缩放的网站？

//Mobile
@media screen and (max-width: 640px) {
    ...
}

//Desktop
@media screen and (min-width: 641px) {
    ...
}

编辑感谢下面的 JoshCs 评论，我意识到我在教程中使用了 viewport 元标记。我想修改我的问题来问：视口标签如何确定任何给定设备要显示的分辨率（如何根据设备的尺寸确定视口分辨率）？

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

【问题讨论】：

您是否设置了视口..？ <meta name="viewport" content="width=device-width, initial-scale=1">
既然你提到了它，我从教程中得到了以下标记。不知道它是做什么的——教程只是说它对 iPhone 来说是必要的。删除它确实会将网站重新缩放到桌面视图。
在 JoshC 回复后我更新了我的问题；见上面的编辑。 width=device-width 如何从设备的物理宽度确定分辨率？如何使用手机尺寸计算手机的视口分辨率？

标签： html css mobile

【解决方案1】：

CSS 像素是一个抽象概念，独立于屏幕上的实际像素。具体来说，它是一个与密度无关的像素。根据设备的物理像素密度，逻辑 CSS 像素的大小相对于物理像素进行缩放。例如，在许多设备中，640 的屏幕宽度具有 2 的 CSS 像素比。因此使用两个像素来绘制单个 CSS 像素。

当您使用视口元标记时，您指示浏览器使用像素比率缩放 CSS 像素。

您可以使用 window.devicePixelRatio 在 webkit 浏览器中确定设备的像素比率。这对物理像素数可用于确定视口分辨率。

参考文献

【讨论】：

【解决方案2】：

我是这样设置的：

<meta name="viewport" content="width=device-width">

CSS：

/********** Desktop - 920px breakpoint ***************************/
@media screen and (max-width: 60em) {}

/*iPAD SUPPORT=====================================--*/
@media (max-width: 56.250em) {}

/*NEXUS SUPPORT=====================================--*/
@media (max-width: 44.063em) {}

/*iPhone SUPPORT=====================================--*/
@media screen and (max-width: 22.500em) {}

您可以使用 jquery 根据视图大小更改端口：

// Check for device screen size
if($.mobile.media("screen and (max-device-width: 640px)")) {
    // Change viewport for smaller devices
    $('meta[name=viewport]').attr('content','width=device-width, initial-scale=1');
}

希望这会有所帮助:)

【讨论】：

感谢Riskbreaker。在意识到我的 HTML 中有视口标记后，我稍微更新了我的问题。现在我正在尝试确定在使用视口元标记时如何根据设备物理尺寸计算结果分辨率。