0

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

只是标准媒体。例子：

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

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

我知道，如果我的手机遵守 12 像素字体大小等精确测量，大多数东西都会太小而无法阅读或看到。

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

4

2 回答 2

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

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

这里有几篇文章。

像素身份危机。

一个像素不是一个像素不是一个像素。

moz媒体查询页面。

如果你想定位设备分辨率，你应该使用

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

}.

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

于 2014-09-26T06:49:54.797 回答
0

问题可能是您没有包含视口元标记

<meta name="viewport" content="width=device-width">
于 2014-09-26T02:29:01.280 回答