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

我编写了一个响应式网站，其中我有CSS媒体查询以检测用户正在浏览的设备的屏幕大小（像素）。关于响应网站，像素和密度

只是标准的媒体。例如：

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

当我测试的网站，我的手机，这是三星Galaxy S4具有1920×1080像素我的网站上显示我的手机版本，这是在这种情况下，@media查询用的最大宽度767px。

据我所知，如果我的手机尊重像12px字体大小这样的精确手段，那么大多数东西都太小，无法阅读或看不到。

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

来源

2014-09-26 Fer Salas

@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给布局的更好的控制

来源

2014-09-26 06:49:54 Sudheer

的问题可能是你没有包含在媒体查询viewport meta-tag

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

来源

2014-09-26 02:29:01 ncardeli

我的指数有这包括 ' – 2014-09-26 02:34:17

视口元标记完全符合您的要求。如果将宽度媒体查询与元视口标记组合在一起，则您的站点将使用设备供应商认为最佳的宽度。尝试移除视口元标记并查看其差异。 – ncardeli 2014-09-26 02:40:53

嗯，当我删除meta标签时没有任何反应。这是正常的吗？ – 2014-09-26 02:52:55

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

回答

相关问题