如何有条件地使用 javascript，如 CSS3 媒体查询、方向？答案

【问题标题】：How to use javascript conditionally like CSS3 media queries, orientation?如何有条件地使用 javascript，如 CSS3 媒体查询、方向？
【发布时间】：2011-11-29 08:32:50
【问题描述】：

如何像 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，它应该只在特定的屏幕尺寸和方向上运行

【问题讨论】：

为什么要让 jQuery 只在一种尺寸和方向上运行？
如果加载后方向或大小发生变化，您希望发生什么？（设备旋转、窗口大小调整等）
我只想在 max-width:1025px 和 max-width:2048px 的情况下使用图像调整 jquery 插件
无论如何你都应该包含这个库。除非屏幕尺寸正确，否则不要使用这些功能
@Eric - 这是我想用来调整图像大小的插件 ollicle.com/projects/jquery/imagefit/eg 仅当 max-width:1025px 和 max-width:2048px 为什么我使用这个插件是因为我不知道谷歌浏览器新标签使用的技术。 stackoverflow.com/questions/7613810/…

标签： javascript jquery css jquery-mobile

【解决方案1】：

...我只想在浏览器的最大宽度为 1900px 时运行 javascript 最小宽度为 768

编辑：实际上，这都是错误的。如果您使用的是移动设备，请使用：

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;
}

【讨论】：

+1 可能比我的方式更干净。
我可以在里面放一个外部的javascript吗？
这不考虑方向变化。
@Jitendra：你不必这样做！让插件无论如何运行，然后将$('img').imagefit() 放入其中。
@Walkerneo：原来的问题有方向：横向，所以我假设有问题的js应该只在那个方向上运行。

【解决方案2】：

我能想到一个快速的解决方案：有条件地将一些样式应用于不可见的 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();

【讨论】：

+1 刚刚输入了一个类似的答案，但你的速度更快。
这就是我所说的，但我认为问题在于 CSS 会根据此示例立即执行：1stwebdesigner.com/css/… 这意味着它不会是即时的，您必须继续检查。
我猜我的答案是看不见的？
@Walkerneo：CSS 立即执行很好！那会让它在javascript之前发生！至于你的回答，太模糊了。
@Walkerneo - 你是对的。仅当浏览器的最大宽度为 1900 像素且最小宽度为 768 时，我才想运行 javascript。

【解决方案3】：

可能值得一提的是，您可能希望像这样挂钩的orientationchange事件：

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

我知道移动 Safari 会触发此事件，您必须检查其他浏览器。

【讨论】：

【解决方案4】：

您可以将媒体查询重写为 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);

【讨论】：

orientationhandler 代码来自developer.mozilla.org/en/detecting_device_orientation#section_4

【解决方案5】：

你可以使用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
}

目前所有现代浏览器都支持 (more details)

旧浏览器的Polyfill： https://github.com/paulirish/matchMedia.js/

【讨论】：

谷歌有一段视频解释了这一点：youtu.be/svEg7MiqGf8?t=3m4s
我认为matchMedia()是javascript原生函数。

【解决方案6】：

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

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

【讨论】：