Question

我编写了一个响应式网站，我在其中使用CSS媒体查询来检测用户正在导航的设备的屏幕尺寸（像素）。

只是标准媒体。例如：

@media (max-width: 1199px){
  /*code*/
}
@media (max-width: 991px){
  /*code*/
}
@media (max-width: 767px){
 /*code*/
}

当我用我的手机测试我的网站时，这是一个1920x1080像素的三星Galaxy S4，我的网站向我显示了移动版本，在这种情况下是@media查询，最大宽度为767px。

据我所知，如果我的手机尊重12px字体大小的确切尺寸，大多数内容都太小而无法阅读或被看到。

所以我的问题是，如何控制我的网站的哪个版本在高分辨率设备上显示，因为在我的情况下，像素媒体查询不起作用。

Answer 1

@media (max-width: 1199px){
  /*code*/
}

媒体查询中的max-width属性有点不同。它不是屏幕的分辨率。它等效于css像素。

以下是几篇文章。

A pixel identity crisis

A pixel is not a pixel is not a pixel

moz media query page

如果您想定位设备分辨率，则应使用

@media all and (max-device-width: 320px) {

}.

max-device-width：此属性测量设备宽度。如果你使用媒体查询编写css，它会变得有点复杂（移动设备标签甚至桌面都可以有1080p分辨率的屏幕）。为了定位设备分辨率，您可能需要查看 - device-pixel-ratio，orientation和device-height等属性，以便更好地控制布局

Answer 2

问题可能是您没有包含viewport meta-tag

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

关于响应式网站，像素和密度

2 个答案: