javascript - max-device-width 是指 document.body.clientWidth 吗？

Question

在媒体查询中，我见过 max-width、min-width、max-device-width 和 min -设备宽度 和方向。

从 JavaScript 的 Angular 来看，这些是指 document.body.clientWidth 吗？或者 window.outerWidth ？我还看到有 document.body.offsetWidth。

是否有资源列出所有有效的 css 媒体查询参数以及与它们匹配的 JavaScript 属性？

Answer 1

因此，您需要一个在 JavaScript 中等效的所有有效 css 媒体查询参数的列表。

让我们试着去做，依靠media queries W3C specification .

---

媒体类型

似乎无法检索媒体类型(屏幕、打印等)directly with a JavaScript property/method ，因此您必须依赖变通方法、脚本或插件。

我发现:

1. matchMedia polyfill 似乎是最好的解决方案(也被 Modernizr 和 Respond.js 使用)
2. CSS media detection script (看起来很老)
3. jMediaType (仍然依赖于 css)

---

媒体特征(可直接检测)

1。宽度

window.innerWidth/document.body.clientWidth/document.documentElement.clientWidth(见下文)

2。高度

window.innerHeight/document.body.clientHeight/document.documentElement.clientHeight(见下文)

3。设备宽度

屏幕宽度

4。设备高度

屏幕高度

5。定位

window.orientation(见下文)

6。颜色

screen.colorDepth

7.分辨率

screen.pixelDepth/window.devicePixelRatio(见下文)

---

媒体特征(间接检测)

1。宽度/高度

鉴于浏览器之间的差异，您需要一个函数来获取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;

2。纵横比

the ratio of the value of the ‘width’ media feature to the value of the ‘height’ media feature

宽度/高度(见上文)

3。设备纵横比

the ratio of the value of the ‘device-width’ to the value of the ‘device-height’

屏幕宽度/屏幕高度

4。分辨率

the density of the pixels of the output device. The ‘dpi’ and ‘dpcm’ units describe the resolution of an output device, i.e., the density of device pixels.

所以它不是很多人认为的屏幕尺寸(宽 x 高)!

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

screen.pixelDepth 仅适用于 Firefox，您可以找到 window.devicePixelRatio 兼容性 on quirksmode.org .

Here我读到 screen.colorDepth 可以作为备用。

5。单色

the number of bits per pixel in a monochrome frame buffer. If the device is not a monochrome device, the output device value will be 0

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

6。定位

is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.

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

window.orientation 属性并非所有浏览器都支持，它返回一个数值，因此与orientation 没有直接关系按照 W3C 的意图。检查this answer on SO获取更多信息。

---

媒体功能(不可检测)

我找不到使用 JavaScript 检测以下媒体功能的方法(我认为这是不可能的):

• 颜色索引
• 扫描
• 网格

---

更多有趣的东西

• screen.availHeight = 屏幕高度减去界面特征(如任务栏)
• screen.availWidth = 屏幕宽度减去界面特征(如任务栏)
• 要用 JavaScript 模拟媒体查询，有 Modernizr's mq() method ，但请注意:如果浏览器不支持媒体查询，它根本不会执行代码，将始终返回false。

---

来源

1. 宽度/高度:http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
2. 设备宽度/高度:http://responsejs.com/labs/dimensions/
3. 方向:Detect rotation of Android phone in the browser with JavaScript
4. 分辨率和颜色相关的东西:http://www.javascriptkit.com/howto/newtech3.shtml
5. 单色:Javascript: detect monochrome display
6. 像素比:http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html