max-device-width是否指向document.body.clientWidth？

Question

在媒體查詢中，我看到了max-width ， min-width ， max-device-width和min-device-width以及orientation 。

從JavaScript的角度來看，這些是指document.body.clientWidth嗎？ 還是window.outerWidth ？ 另外我看到有document.body.offsetWidth 。

是否有資源列出所有有效的css媒體查詢參數以及與之匹配的JavaScript屬性？

Answer 1

因此，您需要一個與JavaScript等效的所有有效css媒體查詢參數的列表。

讓我們嘗試這樣做，依靠媒體查詢W3C規范 。

---

媒體類型

似乎不可能直接使用JavaScript屬性/方法檢索媒體類型（屏幕，打印等），因此您必須依賴於變通方法，腳本或插件。

我發現：

1. matchMedia polyfill似乎是最好的解決方案（由Modernizr和Respond.js使用）
2. CSS媒體檢測腳本 （似乎很老）
3. jMediaType （仍然依賴於CSS）

---

媒體功能（可直接檢測）

寬度

window.innerWidth / document.body.clientWidth / document.documentElement.clientWidth （見下文）

高度

window.innerHeight / document.body.clientHeight / document.documentElement.clientHeight （見下文）

3.設備寬度

screen.width

4.設備高度

screen.height

5.方向

window.orientation （見下文）

6.顏色

screen.colorDepth

7.決議

screen.pixelDepth / window.devicePixelRatio （見下文）

---

媒體功能（間接檢測）

寬度/高度

鑒於瀏覽器之間的差異，您需要一個函數來獲取width和height 。 前段時間我發現這個跨瀏覽器的代碼片段（不記得在哪里）：

var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0];

var width = w.innerWidth||e.clientWidth||g.clientWidth;

var height = w.innerHeight||e.clientHeight||g.clientHeight;

縱橫比

“寬度”媒體要素的值與“高度”媒體要素的值的比率

width / height （見上文）

3.設備縱橫比

'device-width'的值與'device-height'的值的比率

screen.width / screen.height

決議

輸出設備的像素密度。 'dpi'和'dpcm'單位描述輸出設備的分辨率，即設備像素的密度。

因此，許多人認為不是屏幕尺寸（寬度x高度）！

var resolution = window.devicePixelRatio||screen.pixelDepth||screen.colorDepth;

screen.pixelDepth僅適用於Firefox，您可以在quirksmode.org上找到window.devicePixelRatio兼容性。

在這里，我讀到screen.colorDepth可以作為后備。

單色

單色幀緩沖器中每像素的位數。 如果設備不是單色設備，則輸出設備值將為0

if ( screen.colorDepth == 2) {
    var monochrome = /* retrieve resolution here, see above */;
}else{
    var monochrome = 0;
}

6.方向

當'height'媒體特征的值大於或等於'width'媒體特征的值時，它是'portrait'。 否則'方向'是'風景'。

if ( width > height ) {
    var orientation = 'landscape';
}else{
    var orientation  = 'potrait';
}

所有瀏覽器都不支持window.orientation屬性，並且它返回一個數值，因此它與W3C所預期的方向沒有直接關系。 有關詳細信息，請在SO上查看此答案 。

---

媒體功能（不可檢測）

我找不到用JavaScript檢測以下媒體功能的方法（我認為不可能）：

• 顏色索引
• 掃描
• 格

---

更有趣的東西

• screen.availHeight =屏幕高度減去界面功能（例如任務欄）
• screen.availWidth =屏幕寬度減去界面功能（例如任務欄）
• 要使用JavaScript模擬媒體查詢，可以使用Modernizr的mq（）方法 ，但請注意：如果瀏覽器不支持媒體查詢， 則根本不執行代碼將始終返回false 。

---

來源

1. 寬度/高度： http ： //www.howtocreate.co.uk/tutorials/javascript/browserwindow
2. 設備寬度/高度： http ： //responsejs.com/labs/dimensions/
3. 方向： 使用JavaScript檢測瀏覽器中Android手機的旋轉
4. 分辨率和顏色相關的東西： http ： //www.javascriptkit.com/howto/newtech3.shtml
5. 單色： Javascript：檢測單色顯示
6. 像素比率： http ： //www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html

Answer 2

min-width：和max-width：查詢是指邏輯窗口（其大小因用戶更改瀏覽器窗口大小而異），而min-device-width：和max-device-width（以及orientation： ）查詢引用物理屏幕/視口（一旦“meta ... viewport ...”語句修復它，其大小不會改變）。

根據您的目標和受眾，您可能會發現一種比媒體查詢更適合的替代方法。 您可能會發現閱讀http://www.ckollars.org/alternative-to-media-queries.html很有幫助