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

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) {}