题 如何使用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例如 http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js 它应该只在特定的屏幕尺寸和方向上运行


41
2017-10-02 10:02


起源


为什么你希望jQuery只在一个大小和方向上运行? - Eric
如果加载后方向或尺寸发生变化,您希望发生什么? (旋转设备,调整窗口大小等) - Eric
我想只在最大宽度:1025px和最大宽度:2048px时才使用图像大小调整jquery插件 - Jitendra Vyas
无论如何都应该包括库。除非屏幕尺寸正确,否则不要使用这些功能 - Eric
@Eric - 这是我想用来重新调整大小的插件 ollicle.com/projects/jquery/imagefit/eg 只有当max-width:1025px和max-width:2048px为什么我使用这个插件,因为我不知道google chrome new tab使用的技术。 stackoverflow.com/questions/7613810/... - Jitendra Vyas


答案:


这是使用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
}

49
2017-10-03 21:06



有来自Google的视频解释了: youtu.be/svEg7MiqGf8?t=3m4s - DoubleYo


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

11
2017-10-02 10:06



在那里,这应该更好。 - mowwwalker
+1 可能比我的方式更干净。 - Eric
我可以在里面放一个外部的JavaScript吗? - Jitendra Vyas
这没有考虑到方向的变化。 - Emil Stenström
@Walkerneo:原始问题有方向:横向,所以我假设有问题的js只能在那个方向上运行。 - Emil Stenström


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

10
2017-10-02 10:09



+1刚刚完成输入类似的答案,但你更快。 - Rob W
这就是我所说的,但我认为问题在于CSS基于这个例子立即执行: 1stwebdesigner.com/css/...  这意味着它不会是即时的,你必须继续检查。 - mowwwalker
我想我的回答只是隐形? - mowwwalker
@Walkerneo:即时执行的CSS很棒!这会让它在javascript之前发生!至于你的答案,它太模糊了。 - Eric
@Walkerneo - 你是对的。我想只在浏览器的最大宽度为1900px且最小宽度为768时才运行javascript。 - Jitendra Vyas


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

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

我知道有关此事件被移动版Safari激活,您必须检查其他浏览器。


0
2017-10-02 10:30





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

0
2017-10-02 10:33



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