Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera,
Eu quero criar um site mobile e desktop. Não irei utilizar o modo mobile first.
Quero criar um html para versão desktop e mobile, usando um certo javascript ou ajax que identifique que o usuário acessou o site pelo desktop ou pelo mobile e automaticamente encaminhe-o para a versão correta.
Alguém sabe algum tutorial que possa me ajudar?
Abraço a todos desde já
Entendi Bruno..
Digamos então, que eu faça 2 sites.
Tipo o da globo.com
A globo.com, tem um site para desktop e um site para mobile que quando acessam pelo mobile da globo.com ela redireciona para o m.globo.com
Se sabe como faz esse redirecionamento de acordo com as resoluções ?
Ou você ainda sim me aconselha a adaptar o css para diversos dispositivos ?
Abraço e obrigado pelo suporte.
Walla na minha opinião o mais certo seria vc ter um unico html e um unico css e ele se adaptar para as diferentes resoluções
usando as medias queries
É totalmente não recomendado construir dois sites, o próprio W3C é contra isso, faz como falaram, constrói um único site utilizando design responsivo.
olha este exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Seletor de Visualização</title>
<link rel="stylesheet" href="[http://chocotemplates.com/preview/preview.css](http://chocotemplates.com/preview/preview.css)" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://chocotemplates.com/preview/preview.js" type="text/javascript"></script>
</head>
<body class="html">
<div id="customize">
<div id="customize-holder">
<h2>Compatibilidade</h2>
<div class="responsive">
<a href="#" rel="desktop">Desktop</a>
<a href="#" rel="tablet">Tablet</a>
<a href="#" rel="mobile">Mobile</a>
</div>
<h3>Selecione abaixo</h3>
<div class="colors">
<div class="cl"> </div>
<ul>
<li>
<a href="" class="color" style="color:#">
<strong>Visualizando...</strong>
</a>
<ol>
<li><a href="fone.htm">Fone</a></li>
<li><a href="beneficios.htm">Beneficios</a></li>
<li><a href="associe-se.htm">Associe-se</a></li>
</ol>
</li>
</ul>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="iframe-holder">
<iframe id="frame" src="" width="100%" scrolling="auto" frameborder="0"></iframe>
</div>
</body>
</html>Amigo, caso você queira criar um 2º site, e fazer com que redirecione caso esteja com um celular, tablet, ou algo do genero...
tem um seguinte script q faz isso...
segue abaixo:
<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();
var devices = new Array('nokia','iphone','blackberry','sony','lg',
'htc_tattoo','samsung','symbian','SymbianOS','elaine','palm',
'series60','windows ce','android','obigo','netfront',
'openwave','mobilexplorer','operamini');
var url_redirect = 'm.seusite.com';
function mobiDetect(userAgent, devices) {
for(var i = 0; i < devices.length; i++) {return true;
}
}
return false;
}window.location.href = url_redirect;
}
</script>Obrigado Pitag, disso que eu precisava, vou testar aqui..
Abraço
cara dica de ouro, faz com design responsivo, alem de economizar codigos desnecessarios, vai melhorar e muito a manutencao.
alem de que no minimo você tera que contruir umas 10 paginas pra se adequar bem a todas as telas do mercado, fora como monta nos browsers.
da uma olhada em design responsivo que vai ser sucesso.
Boa noite estou iniciando no html, já tenho algum conhecimento, mas o Wallace comentou em usar um html como m 2 CSS fiquei imaginando como vai funcionar, quando o navegador vai identificar o aparelho está sendo usado, é ótimo fazer 1 HTML e deixar a configuração do CSS estabelecer o estilo para cada ... Então alguem pode me dar uma dica ou exemplo?
Abraços
@Marcelo Marques Meyer
Explicar a técnica "um HTML para todos os dispositivos" em uma simples dica é impossível.
Pesquise "Design Responsivo".
A forma correta é não fazer isso.
O html é o mesmo, deve ser o mesmo. Dai vc ajusta a experiência, sem esconder ou remover conteúdo.