Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 779
Jitendra Vyas Avatar asked Oct 02 '11 10:10

Jitendra Vyas


People also ask

How do you add media query using JavaScript?

Using Media Queries With JavaScriptThe window. matchMedia() method returns a MediaQueryList object representing the results of the specified CSS media query string. The value of the matchMedia() method can be any of the media features of the CSS @media rule, like min-height, min-width, orientation, etc.

What is orientation landscape in media query?

Media queries can also be used to change layout of a page depending on the orientation of the browser. You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called "Landscape" orientation.

What does @media do in CSS?

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

Which of the following media types can be used in defining a media query?

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ' width ', ' height ', and ' color '.


2 Answers

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/

like image 174
Emil Stenström Avatar answered Sep 29 '22 15:09

Emil Stenström


...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; } 
like image 45
mowwwalker Avatar answered Sep 29 '22 15:09

mowwwalker