大屏幕显示器上的不同显示

Question

我想在我的网站上显示不同的显示。我已经处理了智能手机，平板电脑和台式机，但是我会为大屏幕做点事情，而且我不是只从解决方案的角度谈论。我希望显示器在21英寸以上的屏幕上有所不同，即使它们具有相同的分辨率，它在15英寸笔记本电脑上的显示效果也不尽相同。

我试图使用基于像素密度的媒体查询，但我得到了混合结果，所以我不确定它是否是最好的方法。我已经试过这样：

@media screen and (max-resolution: 115dpi){ 
    /* CSS rules */ 
} 

我并没有我想尽管这个结果。我正在测试分辨率为1920x1080，像素密度为94.53的23英寸显示器，以及分辨率为1440x900且像素密度为127.68的13英寸MacBook。但是，两款设备的显示效果都是相同的，但它似乎适用于其他一些分辨率不同的笔记本电脑。所以我感到困惑。

我错过了什么？使用像素密度是最好的方法吗？否则我有什么其他选择？

感谢

Answer 1

人们利用它来进行服务的高分辨率图像，并在桌面上显示仍然检测。

为了确保移动设备呈现页面设备的宽度，你需要添加视meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 

之所以人们仍然视查询使用，即@media所有和（MAX-宽度：320px）是因为无论像素密度如何，320像素仍然是320像素。它将是相同的大小。

Answer 2

似乎你缺少在你的媒体的查询表达式，它使用min-width媒体特征：

宽度媒体特征描述了输出装置（的渲染表面 的宽度，如宽度文档窗口的宽度或打印机上页面框的宽度）。

---

添加另一个and逻辑运算符接着min-width媒体特征和所述输出装置的宽度，通常在像素。

---

例子：

@media screen and (min-width:1680px) and (max-resolution: 115dpi) {}