无法使用jquery mobile进入移动屏幕

时间:2012-10-15 11:17:57

标签: jquery html5 jquery-mobile

我正在使用jquery和jquery mobile实现登录页面。

的login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Application</title>  
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.1.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.1.1.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.1.1.css" />


<script type="text/javascript" src='js/jquery-1.8.2.js'></script>        
<script type="text/javascript" src="js/jquery.mobile-1.1.1.js"></script>
<script type="text/javascript" src="js/login.js"></script>

</head>
<body>  
    <div data-role="page" id="home">

        <div data-role="header" data-theme="b">               
            <h1>Developers Code</h1>
        </div>

        <div data-role="content" id="contentConfirmation" name="contentConfirmation" align="center">
            <h1>Login Page</h1>
            <h2></h2>

            <form id="HLogin" method="POST">
                <div data-role="fieldcontain">
                    <label for="url">Username:*</label>  
                    <input class="required" id="Lusername" name="uid_r" value="" type="text">            
                </div>

                <div data-role="fieldcontain">
                    <label for="url">Password:*</label>  
                    <input id="Lpassword" name="pwd_r" value="" type="password">            
                </div>

                <div class="ui-grid-a">
                    <div class="ui-body ui-body-b">
                        <div class="ui-block-a">
                            <button data-icon="delete" data-theme="c" type="submit">cancel</button>  
                        </div>
                        <div class="ui-block-b">
                            <button data-theme="b" type="submit">Login</button>  
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>  

</body>
</html>

此页面不适合屏幕。我想在屏幕上显示所有内容。

你可以帮我解决这个问题。?

1 个答案:

答案 0 :(得分:0)

您应在<head>标记内添加以下内容:

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

希望这会有所帮助。如果有效,请告诉我。