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

如何有条件地使用javascript，如CSS3媒体查询、定向

例如，我可以为特定的应用程序编写css

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

.selector1 { width:960px}

}

现在，我只想在符合相同条件的情况下运行一些javascript

像

我有一个外部javascript，例如

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js

并且它只能在特定的屏幕大小和方向上运行

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

…我只想在浏览器的最大宽度为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;
}

函数doStuff（）{
横向=窗口.方向？窗口.方向='横向]：真；
if（横向和窗内宽度768）{
//代码在这里
}
}
window.onload=window.onresize=doStuff；
if（window.onorientationchange）{
window.onorientationchange=doStuff；
}

我可以想出一个快速的解决方案：有条件地将一些样式应用于不可见的div，并检查它们是否与javascript一起应用：

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

---

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

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

---

我知道这个事件是由mobile Safari引发的，你必须检查一下其他浏览器

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

您可以使用：

测试移动设备媒体查询

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：

---

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

var x=document.documentElement.clientWidth；
如果（x<992）{
document.body.style.backgroundColor=“黄色”；
}

+1刚刚输入了一个类似的答案，但是你更快了。这就是我所说的，但我认为问题是CSS会根据这个示例立即执行：这意味着它不会立即执行，你必须不断检查。我想我的答案是看不见的？@Walkereo:CSS立即执行很好！这将使它在javascript之前发生！至于你的答案，它太模糊了。@Walkereno-你是对的。我只想在浏览器的最大宽度为1900px，最小宽度为768的情况下运行javascript。为什么希望jQuery只在一个大小和方向上运行？如果加载后方向或大小发生变化，您希望发生什么？（设备旋转、窗口大小调整等）我只想在最大宽度：1025px和最大宽度：2048px的情况下使用图像大小调整jquery插件。不管怎样，您都应该包括库。除非屏幕显示正确，否则不要使用这些功能size@Eric-这是一个插件，我只想在最大宽度：1025px和最大宽度：2048px的情况下使用它来重新调整图像大小。为什么我要使用这个插件，因为我不知道google chrome新标签使用的技术+1可能是一种比我更干净的方法。我可以在里面放一个外部javascript吗？这不考虑方向的变化。@Jitendra:你不必！不管怎样，只要让插件运行，并将

$（'img'）.imagefit（）

放入其中。@Walkereo：最初的问题是方向：横向，所以我假设所讨论的js应该只在该方向上运行。方向处理程序代码来自Google的一个视频，其中解释了：我认为是javascript本机函数。

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