实际移动分辨率-Java 学习之路

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

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

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

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

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

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

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

2 回答

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

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

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

References
回复于 2024-05-02T15:28:51+08:00

这就是我设置它的方式：

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

希望这可以帮助：）

回复于 2024-05-02T15:28:51+08:00

实际移动分辨率

2 回答

相关问题