7

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

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

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

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

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

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

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

2 回答 2

6

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

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

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

参考

于 2013-09-30T04:11:12.893 回答
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');
}

希望这可以帮助 ：）

于 2013-09-25T00:40:13.453 回答