.matchmedia_matchMedia：JavaScript的媒体查询

.matchmedia

Many developers associate responsive design exclusively with CSS, but the reality is that every web technology has a role to play in optimizing sites for mobile devices. In some cases, there are functionally equivalent features across different languages that allow you to choose the most appropriate tool for a particular set of conditions.

许多开发人员仅将响应式设计与CSS关联在一起，但现实情况是，每种Web技术都在优化移动设备的网站中发挥作用。 在某些情况下，不同语言具有功能上等效的功能，使您可以针对特定条件选择最合适的工具。

matchMedia is one such feature, allowing CSS3 media queries to be tested directly within JavaScript. The syntax couldn’t be easier:

matchMedia是这样的功能之一，允许CSS3媒体查询直接在JavaScript中进行测试。 语法再简单不过了：

window.matchMedia("(max-width: 800px)");

Almost any media query can be placed within the inner parentheses. For the sake of ease and re-use, I prefer to make a matchMedia test into a JavaScript variable:

几乎所有媒体查询都可以放在括号内。 为了方便和重复使用，我更喜欢将matchMedia测试放入JavaScript变量中：

var screencheck = window.matchMedia("(min-width: 800px)");

To determine if the condition is true, use the .matches property. This could be the condition of an if statement:

若要确定条件是否为真，请使用.matches属性。 这可能是if语句的条件：

var screencheck = window.matchMedia("(min-width: 800px)");
	if (screencheck.matches) {
		/* JavaScript code activated if the browser window is at least 800 pixels wide */
}

matchMedia实践 (matchMedia In Practice)

As a broad rule, matchMedia is used when a dynamic addition is desired on a page in response to browser size changes, in situations where CSS media queries won’t cut it. A good example is the random article bar at the top of this page (assuming that your browser is set wide enough to see it). The vast majority of desktop browsers can see the feature, but there’s little point in sending the images and links to a smartphone, due to lack of space. A common developer approach would be to deliver the feature bar to every browser regardless, hiding it on smaller devices using display: none in a CSS media query. While that works, it’s wasteful of bandwidth, processor cycles, and battery life. A better solution is to only load the content if the screen is large enough to display it:

一般说来，当CSS媒体查询无法削减页面大小时，当需要动态添加页面以响应浏览器大小变化时，将使用matchMedia 。 一个很好的例子是本页顶部的随机文章栏(假设您的浏览器设置得足够宽，可以看到它)。 绝大多数台式机浏览器都可以看到此功能，但是由于空间不足，将图像和链接发送到智能手机毫无意义。 开发人员常用的方法是将功能栏传递给每个浏览器，而无需使用display: none将其隐藏在较小的设备上display: none CSS媒体查询中display: none 。 虽然可以正常工作，但是却浪费了带宽，处理器周期和电池寿命。 更好的解决方案是仅在屏幕足够大以显示内容时才加载内容：

var minql = window.matchMedia("(min-width: 530px)");
	if (minql.matches) {
		$("#featured").load("/extras/featuredbar.php);
}

Here I’m using JQuery’s simple AJAX .load syntax to bring the random articles into an element with an id of featured, but there are many possibilities. In theory, you could use matchMedia to dynamically load different stylesheets as the browser resizes, although it’s likely that simply merging the separate CSS files into a single stylesheet would provide better performance.

在这里，我使用JQuery的简单AJAX .load语法将随机文章带到具有id为.load的元素中 ，但是有很多可能性。 从理论上讲，您可以使用matchMedia在浏览器调整大小时动态加载不同的样式表，尽管将单独CSS文件合并到一个样式表中可能会提供更好的性能。

那PHP呢？ (What about PHP?)

The obvious counterpoint to this is “why can’t I detect the mobile device on its first request to the server, and feed the data it needs from there?"

明显的对策是“为什么我不能在对服务器的第一个请求中检测到该移动设备，并从那里提供所需的数据？”

While that would arguably be more efficient, there are a few issues. As server-side languages, technologies like PHP and Perl don’t have access to the same client information that JavaScript and CSS do. PHP cannot determine a device’s screen size or DPI, for example, so most server-side solutions rely on some form of user-agent sniffing. (php-mobile-detect is a good example).  While this works, it always makes me a little uncomfortable: identifier user agent strings will change, eventually breaking the logic of your server-side script.

尽管可以说效率更高，但是仍然存在一些问题。 作为服务器端语言， PHP和Perl等技术无法访问与JavaScript和CSS相同的客户端信息。 例如，PHP无法确定设备的屏幕尺寸或DPI，因此大多数服务器端解决方案都依赖某种形式的用户代理嗅探。 ( php-mobile-detect是一个很好的例子)。 虽然这样做有效，但总是让我有些不舒服：标识符用户代理字符串将更改，最终破坏了服务器端脚本的逻辑。

PHP and associated technologies absolutely have roles to play in responsive design, to the point at which they have been given their own acronym: RESS, for Responsive Design with Server-Side Components. Like other technologies, server-side is used as one part of a responsive solution, not the whole package.

PHP和相关技术在响应式设计中绝对起着作用，以至于它们已经有了自己的缩写：RESS，用于服务器端组件的响应式设计。 与其他技术一样，服务器端被用作响应解决方案的一部分 ，而不是整个软件包。

支持 (Support)

matchMedia has excellent support across all browsers, with the exception of – can you guess? – Internet Explorer. Both it and the Blackberry browser are limited to version 10+. (Opera also has only recent version support, but I expect things there to change rapidly as the browser segues into the Blink rendering engine). Paul Irish, Scott Jehl and Nicholas Zakas collaborated to code a good matchmedia polyfill solution for older browsers.

matchMedia在所有浏览器上均具有出色的支持，除了–您可以猜测吗？ - IE浏览器。 它和Blackberry浏览器都限于10+版本。 (Opera也仅支持最新版本，但我希望当浏览器进入Blink渲染引擎时，那里的情况会Swift改变)。 Paul Irish，Scott Jehl和Nicholas Zakas合作为旧版浏览器编写了一个很好的matchmedia polyfill解决方案 。

翻译自: https://thenewcode.com/702/matchMedia-Media-Queries-For-JavaScript

.matchmedia