关于响应式网站、像素和密度答案

【问题标题】：About responsive sites, pixels, and density关于响应式网站、像素和密度
【发布时间】：2014-11-20 23:09:12
【问题描述】：

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

只是标准媒体。示例：

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

当我使用我的手机（1920x1080 像素的三星 Galaxy S4）测试我的网站时，我的网站向我显示了手机版本，在本例中是最大宽度为 767 像素的 @media 查询。

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

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

【问题讨论】：

标签： css mobile responsive-design high-resolution

【解决方案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 等属性，以便更好地控制布局

【讨论】：

【解决方案2】：

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

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

【讨论】：

我的索引有这个包括<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
视口元标记完全符合您的要求。如果您将宽度媒体查询与元视口标签结合使用，您的网站将使用设备供应商认为最佳的宽度。尝试删除视口元标记并查看差异。
嗯，当我删除元标记时没有任何反应。这正常吗？