Jump to content
wallacejonathan

como fazer Html desktop e html mobile em um só site

Recommended Posts

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á

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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" 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>

Share this post


Link to post
Share on other sites

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++) {
if (userAgent.search(devices[i]) > 0) {
return true;
}
}
return false;
}
if (mobiDetect(userAgent, devices)) {
window.location.href = url_redirect;
}
</script>
Edited by Pitag346

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.