Thursday, April 4, 2013

jquery for css media query

Here is how we can target different devices with the help of jquery, modernizr and CSS Media Query -

We need to include Modernizr and jQuery js files in our HTML to get this working -

<script src="js/modernizr-2.6.2.min.js"></script>
<script src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(window).resize(function() {
    if (Modernizr.mq('(max-width: 1024px)')) {
        // do something
} }); </script>
In this example below we are targeting 'Samsung P6200 Galaxy Tab 7.0 Plus'
<script type="text/javascript">
$(function(){
    if (Modernizr.mq('(max-device-width: 1024px) and (min-device-width: 600px)')) {
       alert('You are in!');
} }); </script>