Ajuda com Jquery Mobile

Front-end
#1

Olá pessoal td joia?

Resolvi aprender um pouco sobre desenvolvimento para dispositivos móveis.
E descobri que posso juntar isso com a parte web que é o que eu gosto.
Estou usando então o phonegap com jquery mobile.
Estava tudo ok no emulador android, mas quando fui testar no meu galaxy tab os elementos ficaram “pequenos”.
Estranho que usei porcentagem em todas as divs que eu criava. Fazia todo css com porcentagem e position:relative…

Usei a meta tag viewport com device-width e nada
Achei algo sobre adicionar no css @media e o tamanho do dispositivo em pixels, mas ai teria q fazer uma folha de estilos pra cada tamanho e trabalhar com pixels, ainda não testei essa alternativa
E eu queria algo com porcentagem pra ser versátil e menos trabalhoso

Queria saber de alguem que usa o Jquery Mobile se essa é a solução e se tem alguma dica pra me dar…
Até pq eu achei q o próprio css que vem com o jquery mobile cuidava dessa parte…

#2

Olha se você importou certinho os CSS e JS na sua página ele já deveria renderizar como uma aplicação Android no seu dispositivo.

Dá uma olhada em http://jquerymobile.com/demos/1.1.1/ se ele renderizar corretamente no seu dispositivo então está faltando
alguma coisa na sua página.

abs

#3

Valeu por ter respondido…
Dei uma passada nessa documentação já, provavelmente então a dimensão está correta e eu que achei pequena pro tamanho do galaxy tab

Uma outra dificuldade que eu estou tendo é centralizar os inputs no form.
Não estou usando label e então eles ficando na margem da minha

e não tem css margin:0 auto que resolva, alguma ideia?
E fora dessa div o input button toma a tela toda mas o input text não, então achei melhor deixar tudo igual mas ai não fica centralizado

Obrigado novamente…vou continuar googlando e pesquisando aqui no forum sobre isso

#4

Opá, segue um exemplo.

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <title>TITULO - v1.0.A</title>
    </head>
    <body>
        <div data-role="page" data-theme="d" data-title="Login" id="idLogin">
            <div data-role="header" data-theme="d">
                <h1>Login</h1>
            </div>            
            <div data-role="content" data-theme="d">
            </div>
            <div data-role="footer" data-theme="d">
           </div>
        </div>        
    </body>
</html>

Abraço,

#5