如何像 CSS3 媒体查询、方向一样有条件地使用 javascript？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7625718/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use javascript conditionally like CSS3 media queries, orientation?
提问by Jitendra Vyas
How to use javascript conditionally like CSS3 media queries, orientation?
如何像 CSS3 媒体查询、方向一样有条件地使用 javascript？
For Example I can write css for specific
例如，我可以为特定的对象编写 css
@media only screen and (width : 1024px) and (orientation : landscape) {
.selector1 { width:960px}
}
Now I want to only run some javascript if it match the same conditions
现在我只想运行一些符合相同条件的 javascript
like
喜欢
@media only screen and (width : 1024px) and (orientation : landscape) {
A javascript code here
}
I have a external javascript for example http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.jsand it should be only run on specific screen size and orientation
例如http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js，我有一个外部 javascript ，它应该只在特定的屏幕尺寸和方向上运行
回答by Emil Stenstr?m
You can use window.matchMedia():
您可以使用window.matchMedia()：
Test a mobile device media query
测试移动设备媒体查询
if (matchMedia('only screen and (max-width: 480px)').matches) {
// smartphone/iphone... maybe run some small-screen related dom scripting?
}
Test landscape orientation
测试横向
if (matchMedia('all and (orientation:landscape)').matches) {
// probably tablet in widescreen view
}
Currently supported in all modern browsers (more details)
当前在所有现代浏览器中都受支持（更多详细信息）
Polyfill for old browsers: https://github.com/paulirish/matchMedia.js/
旧浏览器的 Polyfill：https: //github.com/paulirish/matchMedia.js/
回答by mowwwalker
...I want to run a javascript only if max-width of browser is 1900px and min-width is 768
...我只想在浏览器的最大宽度为 1900 像素且最小宽度为 768 时运行 javascript
EDIT:Actually, that was all wrong. If you're using a mobile device, use:
编辑：实际上，那都是错误的。如果您使用的是移动设备，请使用：
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;
}
回答by Eric
I can think of a quick solution: Apply some styles conditionally to an invisible div, and check if they are applied with javascript:
我可以想到一个快速的解决方案：有条件地将一些样式应用于不可见的 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();
回答by vzwick
It's probably worth mentioning that there is the orientationchange event that you might want to hook into like so:
可能值得一提的是，您可能希望像这样挂钩orientationchange事件：
$('body').bind('orientationchange', function(){
// check orientation, update styles accordingly
});
I know that about this event being fired by mobile Safari, you'd have to check about other browsers.
我知道移动 Safari 会触发此事件，您必须检查其他浏览器。
回答by Emil Stenstr?m
You could just rewrite the media query as a javascript expression instead:
您可以将媒体查询重写为 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);
