Question

我设计了一个页面，它使用modernizr根据宽度检测设备。问题是，如果我调整浏览器窗口的大小，UI就会变坏。我想让UI变得如此灵活，如果我调整浏览器窗口的大小，它应该适当地适应它，如果窗口宽度将调整为320px，浏览器将显示jquery-mobile ui。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Social Search</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="modernizr.custom.15317.js"></script>
    </head>
    <body>
        <div data-role="page" data-title="Social Search" data-theme="b">
            <header data-role="header" data-theme="b">
                <h1>Social Media Search</h1>
            </header>
            <div id="wrapper" data-role="content">
                <form id="frmSearch" action="#" method="POST">
                    <div data-role="fieldcontain">
                        <label for="txtSearch">Search:</label>
                        <input type="search" name="txtSearch" id="txtSearch" required />
                    </div>

                    <input type="submit" name="btnSubmit" value="Go" />
                </form>
            </div>
            <footer data-role="footer" data-theme="b">
                <p>Powered by my company</p>
            </footer> 
        </div>
        <script type="text/javascript">
            Modernizr.load([
                {
                    test: Modernizr.mq('(min-device-width: 320px) and (max-device-width: 728px)'),
                    yep : ['mob.css', 'jquery.mobile-1.1.0.css', 'jquery.mobile-1.1.0.js'],
                    nope : 'pc.css'
                }
            ]);

            if (!Modernizr.borderradius) {
                $.getScript("jquery.corner.js", function () {
                    $("input").corner();
                });
            }

            if(!Modernizr.required) {
                $("#frmSearch").submit(function(){
                    if($.trim($("#txtSearch").val().length) == 0){
                        alert('Please, Enter some keyword');
                        return false;
                    }
                });
            }

            $(window).resize(function(){
                if($(window).width() 

            })
        </script>
    </body>
</html>

检测实时浏览器大小并显示UI

0 个答案: