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

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

例如我可以写特定的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例如ajax/jQuery/jquery-1.6.4.min.js ，它应该只能运行在特定的屏幕大小和方向

Answer 1

这里有一个更好的方法来做同样的javascript：

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

testing移动设备媒体查询

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

testing横向方向

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

Answer 2

…我只想运行一个JavaScript，如果浏览器的最大宽度是1900px，最小宽度是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

我可以想到一个快速的解决scheme：将一些样式有条件地应用到一个不可见的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

您可以将媒体查询重写为javascriptexpression式：

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