Ajuda com Jquery Mobile

30 de setembro de 2012 3 respostas

vbullet 30 de setembro de 2012

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…

3 Respostas

pedrinho20 30 de set. de 2012

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

vbullet 1 de out. de 2012

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

cristianoassis 4 de dez. de 2012

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,

Criado 30 de setembro de 2012

Ultima resposta 4 de dez. de 2012

Respostas 3

Participantes 3

3 Respostas

Topicos relacionados