Estou implementando a página de logon usando jquery e 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>
Esta página não cabe na tela. Quero encaixar todo o conteúdo na tela.
Você poderia me ajudar com isso?
Respostas:
0 para resposta № 1Você deve adicionar o seguinte dentro do seu <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Espero que isto ajude. Deixe-me saber se isso funciona.