Question

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

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

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

//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">

Answer 1

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

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

您可以使用window.devicePixelRatio在webkit浏览器中确定设备的像素比率。可以使用与物理像素计数相关联来确定视口分辨率。

<强>参考

Answer 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');
}

希望这会有所帮助：）

实际移动分辨率

2 个答案: