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

Answer 1

这是使用javascript执行相同操作的更好方法：

https://github.com/paulirish/matchMedia.js/

测试移动设备媒体查询

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
}

Answer 2

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

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();

Answer 4

可能值得一提的是，您可能想要挂钩的orientationchange事件如下：

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

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

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

Answer 6

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

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

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

6 个答案: