Ir para conteúdo
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á

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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>

Compartilhar este post


Link para o post
Compartilhar em outros 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>
Editado por Pitag346

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.