如何像CSS3媒体查询和方向一样有条件地使用JavaScript？

Question

如何像CSS3媒体查询和方向一样有条件地使用JavaScript？

例如，我可以为特定的元素编写CSS：

@media only screen and (width : 1024px) and (orientation : landscape) {

.selector1 { width:960px}

}

现在我希望仅在满足相同条件时运行一些JavaScript，类似于：

@media only screen and (width : 1024px) and (orientation : landscape) {

A javascript code here

}

我有一个外部javascript文件，比如 http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js ，它应该只在特定的屏幕尺寸和方向下运行。

- Jitendra Vyas

---

如果加载后方向或大小发生变化（设备旋转，窗口调整大小等），您希望发生什么？ - Eric

我想在 max-width:1025px 和 max-width:2048px 的情况下使用一个图片缩放的 jQuery 插件。 - Jitendra Vyas

我不确定你是否理解jQuery插件的工作原理。默认情况下，它们实际上并不执行任何操作。它们只是包含一些代码，使您能够执行某些操作。在您的插件中，$(selector).imagefit()才是关键所在。 - Eric

我建议不要仅仅为了引入而引入库。添加一个库的引用却不使用它只会使请求和发送到客户端的数据包变得臃肿。 - rlcrews

@JitendraVyas：您是否介意将我的答案标记为已接受？它获得了42个投票，因此我认为应该被视为最好的答案。 - Emil Stenström

Answer 1

你可以使用 window.matchMedia()：

测试移动设备的媒体查询。

if (matchMedia('only screen and (max-width: 480px)').matches) {
  // smartphone/iphone... maybe run some small-screen related dom scripting?
}

测试横向方向

if (matchMedia('all and (orientation:landscape)').matches) {
  // probably tablet in widescreen view
}

现代浏览器均已支持此功能（更多详情请查看）

对于旧版浏览器，可以使用以下polyfill： https://github.com/paulirish/matchMedia.js/

- Emil Stenström

---

有一段来自谷歌的视频，解释了这个问题：http://youtu.be/svEg7MiqGf8?t=3m4s - Yoann

我认为matchMedia()是JavaScript原生函数。 - Mohammad

Answer 2

...我想在浏览器的最大宽度为1900像素且最小宽度为768像素时运行JavaScript。

编辑：实际上，之前的说法都是错误的。如果你正在使用移动设备，请使用：

function doStuff(){
    landscape = window.orientation? window.orientation=='landscape' : true;

    if(landscape && window.innerWidth<1900 && window.innerWidth > 768){
        //code here
    }
}
window.onload=window.onresize=doStuff;
if(window.onorientationchange){
    window.onorientationchange=doStuff;
}

- mowwwalker

---

+1 可能有比我的方法更干净的方式。 - Eric

我可以把外部JavaScript放进去吗？ - Jitendra Vyas

这并没有考虑方向的改变。 - Emil Stenström

@Walkerneo：原始问题的方向是横向的，因此我认为相关的js应该只在该方向下运行。 - Emil Stenström

滚动条会使这个失效。 - lededje

Answer 3

我能想到一个快速的解决方案：对一个不可见的div应用一些有条件的样式，并使用javascript检查它们是否被应用：

div#test { display: none }
@media only screen and (width : 1024px) and (orientation : landscape) {
    div#test { background-color: white; }
}

if(document.getElementById('test').style.backgroundColor == 'white')
    mediaSelectorIsActive();

- Eric

---

+1 刚刚打完类似的答案，但你更快。 - Rob W

这就是我说的，但我认为问题在于CSS基于此示例立即执行：http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/这意味着它不会是即时的，你必须不断地检查。 - mowwwalker

@Walkerneo - 你说得对。我想只有在浏览器的最大宽度为1900px且最小宽度为768时才运行JavaScript。 - Jitendra Vyas

@Walkerneo：这是原问题存在的问题。提问者没有指定如果调整窗口大小要发生什么。你不能“取消运行”脚本，而且每次调整窗口大小重新运行脚本可能是个坏主意。 - Eric

@JitendraVyas，但是你的示例代码检查窗口方向，这只存在于移动设备中... - mowwwalker

Answer 4

值得一提的是，可能有方向改变事件（orientationchange event）需要您像这样挂钩：

$('body').bind('orientationchange', function(){
    // check orientation, update styles accordingly
});

我知道这个事件是由移动Safari触发的，你需要检查其他浏览器。

- vzwick

Answer 5

你可以将媒体查询重写为JavaScript表达式：

function sizehandler(evt) {
    ...
}

function orientationhandler(evt){  

  // For FF3.6+  
  if (!evt.gamma && !evt.beta) {  
    evt.gamma = -(evt.x * (180 / Math.PI));  
    evt.beta = -(evt.y * (180 / Math.PI));  
  }  

  // use evt.gamma, evt.beta, and evt.alpha   
  // according to dev.w3.org/geo/api/spec-source-orientation  

  ...
}  

window.addEventListener('deviceorientation', orientationhandler, false);
window.addEventListener('MozOrientation', orientationhandler, false);
window.addEventListener('load', orientationhandler, false); 
window.addEventListener('resize', sizehandler, false); 
window.addEventListener('load', sizehandler, false); 

- Emil Stenström

---

orientationhandler 代码来自 https://developer.mozilla.org/en/detecting_device_orientation#section_4 - Emil Stenström

Answer 6

我发现的最简单的方法是获取页面的宽度，然后有条件地使用它。

var x = document.documentElement.clientWidth;
if (x < 992) {     
        document.body.style.backgroundColor = "yellow";
}

- crg