How to use javascript conditionally like CSS3 media queries, orientation?
How to use javascript conditionally like CSS3 media queries, orientation?
For Example I can write css for specific
@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
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.js
and it should be only run on specific screen size and orientation
Solution 1:
You can use 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/
Solution 2:
...I want to run a javascript only if max-width of browser is 1900px and min-width is 768
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;
}