Changing meta viewport depending on device/screen resolution in jQuery Mobile

Question

I would like to change my viewport from:

<meta name="viewport" content="user-scalable=no">

To:

<meta name="viewport" content="width=device-width, initial-scale=1">

Based on device screen. The first example works perfect for the iPad, but on the iPhone I have a responsive style sheet that i want to kick in.

I've tried this snippet which I've modified from this question. changing viewport based on device resolution

// Check for iPhone screen size
if($.mobile.media("screen and (min-width: 320px)")) {
    // Change viewport for smaller devices
    $('meta[name=viewport]').attr('content','width=device-width, initial-scale=1');
}

Answer 1

I figured it out. The issue was with my media query. It should be max-device-width, not min-width or max-width.

// Check for device screen size
if($.mobile.media("screen and (max-device-width: 480px)")) {
    // Change viewport for smaller devices
    $('meta[name=viewport]').attr('content','width=device-width, initial-scale=1');
}