11

在媒体查询中，我见过max-width、min-width、 max-device-width和。min-device-widthorientation

从 JavaScript 的角度来看，这些是指document.body.clientWidth? 或者window.outerWidth？我也看到有document.body.offsetWidth。

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

4

2 回答 2

13

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

让我们尝试这样做，依靠 媒体查询 W3C 规范。

媒体类型

似乎无法直接使用 JavaScript 属性/方法检索媒体类型（屏幕、打印等） ，因此您必须依赖变通方法、脚本或插件。

我发现：

  1. matchMedia polyfill似乎是最好的解决方案（Modernizr 和 Respond.js 也使用）
  2. CSS 媒体检测脚本（似乎有点老了）
  3. jMediaType（仍然依赖于 css）

媒体功能（可直接检测）

1.宽度

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

2.高度

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（见下文）

媒体功能（间接检测）

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. 纵横比

“宽度”媒体特征的值与“高度”媒体特征的值的比率

width/ height（见上文）

3. 设备纵横比

'device-width' 值与 'device-height' 值的比值</p>

screen.width/screen.height

4.分辨率

输出设备的像素密度。“dpi”和“dpcm”单位描述了输出设备的分辨率，即设备像素的密度。

所以它不是许多人认为的屏幕尺寸（宽 x 高）！

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

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

在这里，我读到这screen.colorDepth可以作为后备。

5.单色

单色帧缓冲区​​中每个像素的位数。如果设备不是单色设备，则输出设备值为 0

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

6. 定位

当“高度”媒体特征的值大于或等于“宽度”媒体特征的值时为“纵向”。否则“方向”就是“风景”。

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
于 2012-09-26T18:29:32.047 回答
0

min-width: 和 max-width: 查询指的是逻辑窗口（其大小随着用户更改浏览器窗口的大小而变化），而 min-device-width: 和 max-device-width （和方向： ) 查询是指物理屏幕/视口（一旦“meta...viewport...”语句修复它，其大小就不会改变）。

根据您的目标和受众，您可能会找到比媒体查询更适合的替代方法。您可能会发现细读http://www.ckollars.org/alternative-to-media-queries.html很有帮助

于 2012-09-26T20:21:57.990 回答