jQM Dialog on pageinit

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
    <div data-role="page" data-theme="a" id="home">
        <div data-role="header" data-theme="a" align="center">
            <h1>Home</h1>
        </div>

        <div data-role="content">
            <p>Landing page</p>
        </div>
    </div>

    <div data-role="page" data-theme="d" id="android">
        <div data-role="header" data-theme="a" align="center">
            <h1>Android</h1>
        </div>

        <div data-role="content">
            <p>Android instructions</p>
            <a href="#home" data-role="button" data-theme="b">OK</a>
        </div>
    </div>

    <div data-role="page" data-theme="d" id="winPhone">
        <div data-role="header" data-theme="a" align="center">
            <h1>Win Phone</h1>
        </div>

        <div data-role="content">
            <p>Windows Phone instructions</p>
            <a href="#home" data-role="button" data-theme="b">OK</a>
        </div>
    </div>

    <div data-role="page" data-theme="d" id="Blackberry">
        <div data-role="header" data-theme="a" align="center">
            <h1>Blackberry</h1>
        </div>

        <div data-role="content">
            <p>Blackberry instructions</p>
            <a href="#home" data-role="button" data-theme="b">OK</a>
        </div>
    </div>

    <div data-role="page" data-theme="d" id="bb10">
        <div data-role="header" data-theme="a" align="center">
            <h1>BB10</h1>
        </div>

        <div data-role="content">
            <p>BB10 instructions</p>
            <a href="#home" data-role="button" data-theme="b">OK</a>
        </div>
   ...

JavaScript

$('#home').on('pageinit', function(){
        var ua = navigator.userAgent.toLowerCase(),
            page = '', 
            role='dialog';

        switch(true) {
            case (ua.indexOf("android") > -1):
                page = '#android';
                break;
            case (ua.indexOf("windows phone") > -1):
                page = '#winPhone';
                break;
            case (ua.indexOf("blackberry") > -1):
                page = '#Blackberry';
                break;
            case (ua.indexOf("bb10") > -1):
                page = '#bbTen'; 
                break;
            case ($(window).width() < 599):
                page = '#generic';
                break;
        }
        if (page.length) {
            $.mobile.changePage(page, {transition:'pop', role:role});
            return false;
        }    
    });