Jump to content

  2. →
  3. →

Photo

Verificar Resolução Do Navegador E Trocar Css

Started By Rei Lagarto, 23/01/2008, 15:13

  • Faça o login para participar
25 replies to this topic

#1 Rei Lagarto

Rei Lagarto

    Turista

  • Usuários
  • 25 posts
  • Sexo:Não informado

Posted 23/01/2008, 15:13

O sistema de busca não me ajudou, procurei palavras como "resolução", "css", "javascript" e não encontrei solução para o meu problema, então resolvi criar o tópico. Se existe algum com a mesma dúvida, peço desculpa.

Tenho 1 layout e dois estilos CSS. Um para a resolução 1024 e outro 800.
Como faço para que seja verificado a resolução do navegador do visitante e então carregar o estilo.css de acordo?

Alguém sabe como fazer?

Obrigado!
Dupla Vista - Uma Semente Espírita

#2 Aimberê Rocha Mendonça

Aimberê Rocha Mendonça

    Turista

  • Usuários
  • 45 posts
  • Sexo:Masculino
  • Localidade:brasília

Posted 23/01/2008, 15:25

boa tarde cara,
isso vc pode fazer com esse java script

function verificaResolucao(){
		if(screen.width == 800){

			  faça sua mudança de css
		}

		else

				   a outra mudança


	 }

tenta usar isso, acho que dá certo
abrass
Aimberê Rocha Mendonça
IT Analyst and Developer

#3 Rei Lagarto

Rei Lagarto

    Turista

  • Usuários
  • 25 posts
  • Sexo:Não informado

Posted 23/01/2008, 16:14

Obrigado Aimberê.

Se não for pedir muito, o que eu coloco em "faça sua mudança de css" e "a outra mudança" ?
Tá, pode me chamar de mané, eu deixo. :-P

E esse "verificaResolucao" tem que colocar na tag <body> ou não tem nada a ver?

Dá uma mastigada pra mim, por favor. Meu negócio é CSS e XHTML, quando entra JS e PHP eu me perco todo.

Grande abraço!
Dupla Vista - Uma Semente Espírita

#4 Renan L. Queiroz

Renan L. Queiroz

    Mestre

  • Usuários
  • 690 posts
  • Sexo:Masculino
  • Localidade:Brasilia - DF

Posted 23/01/2008, 16:43

Obrigado Aimberê.

Se não for pedir muito, o que eu coloco em "faça sua mudança de css" e "a outra mudança" ?
Tá, pode me chamar de mané, eu deixo. :-P

E esse "verificaResolucao" tem que colocar na tag <body> ou não tem nada a ver?

Dá uma mastigada pra mim, por favor. Meu negócio é CSS e XHTML, quando entra JS e PHP eu me perco todo.

Grande abraço!


Olha tenho quase certeza de que em algum canto desse forum temos esse código pronto...

Utilize a pesquisa do forum ... verifique se alguns desses pode te ajudar:
[topic="http://forum.wmonlin... Resolução da Tela[/topic] (Link expirado, acesse abaixo)
http://forum.wmonlin...
[topic="http://forum.wmonlin... da Tela[/topic] (Link expirado, acesse abaixo)
http://forum.wmonlin...

Outra coisa, essas partes "faça sua mudança de css" e "a outra mudança" são os atributos css dos objetos que vc vai mudar, via Javascript!

O "verificaResolucao" vc coloca no Body sim ... usando o onload ficando assim <body onload="verificaResolucao();">

;-)

Edição feita por: Renan L. Queiroz, 23/01/2008, 16:51.

Especialidade: Desenvolvimento e Banco de Dados.


Este post lhe ajudou? Agradeça: Posted Image

#5 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 23/01/2008, 17:22

Acho que não é bem por aí o caminho. Você não deve fazer uma folha de estilos para cada resolução ... Existem técnicas como "liquid layout" que permitem que o site seja adequado a diversas resoluções. Existe ainda uma mescla do tradicional com o líquido, onde somente alguns elementos possuem a elasticidade.

De qualquer forma, ao trocar os estilos somente no onload, o site vai carregar inteiro e depois aplicar as transformações. Ou seja, o usuário vai ver aquela coisa feia e depois o site vai se "construindo" diante dos olhos dele. Além de existir o fato da obstrusão caso não esteja habilitado o javascript no navegador.

Como o W3c vacila, mas não está pra brincadeira, já existe uma solução. São chamadas de folhas de estilo alternativas. Modo convencional de importar:

<link rel="stylesheet" type="text/css" href="main.css" title="Estilo Principal" />

O "rel" define que é uma folha de estilos. No seu caso seria mais ou menos assim:
<link rel="stylesheet" type="text/css" href="menor.css" title="800" />
<link rel="alternate stylesheet"  type="text/css" href="maior.css" title="1024" />

O Mozilla possui um menu que permite ao usário fazer a troca, já o IE não ... nossa que novidade o IE estar atrás ... ^^
E não faz diferença, já que você quer que javascript faça isso. Como eu sei que ninguém vai ter interesse em aprender, vou colocar a função direto:
function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
	 if(a.getAttribute("rel").indexOf("style") != -1
		&& a.getAttribute("title")) {
	   a.disabled = true;
	   if(a.getAttribute("title") == title) a.disabled = false;
	 }
   }
}

É só adicionar a função no HEAD da página e logo abaixo fazer a chamada:
setActiveStyleSheet('1024');

// ou se for 800
setActiveStyleSheet('800');

É só adaptar à função postada acima pelo outro usuário.
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#6 Rei Lagarto

Rei Lagarto

    Turista

  • Usuários
  • 25 posts
  • Sexo:Não informado

Posted 23/01/2008, 18:43

Consegui das duas formas e agradeço toda ajuda. Salvaram minha semana.

Caso alguém passe por aqui com essa dúvida, a solução oferecida pelo Aimberê e Renan, fiz assim e funcionou:

if (screen.width == 1024)
{
document.write('<link rel="stylesheet" type="../1024.css">')
} 
else 
{
document.write('<link rel="stylesheet" type="../800.css">')
}

Já a solução do bimonti dispensa explicações, está bem fácil entender.
E foi essa que optei. Criei dois links dando a opção pro usuário escolher a resolução preferida.

Muito obrigado a todos!

Edição feita por: Rei Lagarto, 23/01/2008, 18:45.

Dupla Vista - Uma Semente Espírita

#7 Renan L. Queiroz

Renan L. Queiroz

    Mestre

  • Usuários
  • 690 posts
  • Sexo:Masculino
  • Localidade:Brasilia - DF

Posted 25/01/2008, 08:36

O Mozilla possui um menu que permite ao usário fazer a troca, já o IE não ... nossa que novidade o IE estar atrás ... ^^
E não faz diferença, já que você quer que javascript faça isso. Como eu sei que ninguém vai ter interesse em aprender, vou colocar a função direto:

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
	 if(a.getAttribute("rel").indexOf("style") != -1
		&& a.getAttribute("title")) {
	   a.disabled = true;
	   if(a.getAttribute("title") == title) a.disabled = false;
	 }
   }
}


Bimonti, muito legal essa função, mas como não quero passar o resto da minha
vida de códigos de outras pessoas procurei à respeito do funcionamento dessa função ...

Valeu pelo conhecimento!

Maujor

Edição feita por: Renan L. Queiroz, 25/01/2008, 08:37.

Especialidade: Desenvolvimento e Banco de Dados.


Este post lhe ajudou? Agradeça: Posted Image

#8 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 25/01/2008, 08:44

Os códigos do artigo eu peguei no A List Apart, que por sinal éde onde o Maujor copiou o artigo e traduziu. É só ler e correr pro abraço ....
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#9 Renan L. Queiroz

Renan L. Queiroz

    Mestre

  • Usuários
  • 690 posts
  • Sexo:Masculino
  • Localidade:Brasilia - DF

Posted 25/01/2008, 10:52

Valeu mesmo Bimonti!!!

Muito legal ... já estou fazendo alguns testes!
Muito interessante ... poupa muito trabalho!

;-)

Edição feita por: Renan L. Queiroz, 25/01/2008, 10:54.

Especialidade: Desenvolvimento e Banco de Dados.


Este post lhe ajudou? Agradeça: Posted Image

#10 Rei Lagarto

Rei Lagarto

    Turista

  • Usuários
  • 25 posts
  • Sexo:Não informado

Posted 18/02/2008, 12:49

Bimonti (e demais) só agora consegui testar em todos os browsers e vi que o IE6 não guarda a resolução escolhida.

Se puder ajudar, agradeço, já quebrei a cuca e não consegui descobrir.
Todos os outros browsers, Firefox, IE7, Safari, etc., guardam perfeitamente.

Abraço!
Dupla Vista - Uma Semente Espírita

#11 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 18/02/2008, 14:22

Aqui ó: http://www.maujor.co...lternatecss.php

Tem que usar cookies para salvar a folha escolhida. Está em português.
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#12 Rei Lagarto

Rei Lagarto

    Turista

  • Usuários
  • 25 posts
  • Sexo:Não informado

Posted 18/02/2008, 15:43

Valeu Bimonti, mas lá no final do artigo tem o arquivo completo já com os cookies e mesmo assim não funciona no IE6.

Bom, como não manjo de javascript peço que dê uma olhada, se puder claro, não se trata de querer mastigado, é que realmente não conheço a linguagem.

Obrigado.
Dupla Vista - Uma Semente Espírita

#13 § Kenshin §

§ Kenshin §

    I'm coming back...!

  • Usuários
  • 574 posts
  • Sexo:Masculino
  • Localidade:BA
  • Interesses:Sou fã de linguagens direcionadas para a web, como php, (x)html, xml, wml.
    Também gosto de webdesign e ultimamente tenho me dedicado mais a aprender css, mysql, javascript, ajax e actionscript.
    Trabalho com os programas Dreamweaver, Illustrator e Flash.

Posted 18/02/2008, 16:54

so por curiosidade, to pegando o bonde andando, mas no seu caso nao serviria criar o layout para resolucao 800x600 e centralizar na pagina, horizontalmente? :huh:
assim, independente da resolucao ser 800 ou maior, o layout nao mudaria.

mas caso seja algo como um forum, ou precise realmente ocupar a tela inteira, ignore o comentario.

vlw ^_^
Web Developer / Web Designer / Information Architect
"Living to learn... learning to live!"
Useful links: Rules | Search

#14 Rei Lagarto

Rei Lagarto

    Turista

  • Usuários
  • 25 posts
  • Sexo:Não informado

Posted 26/02/2008, 08:45

Kenshin, quero preencher a tela de quem usa 800 e também de quem usa 1024. Mas não gosto de layout líquido/fluído/elástico, uma vez que não dá pra controlar o posicionamento de alguns elementos na página.

Mas isso já consegui com a dica do Bimonti, tenho aqui duas CSS que muda a resolução mantendo o layout fixo. O galho está no o IE6, como explico na mensagem acima.

Aguardo a caridade de algum mestre em javascript pra resolver isso. .-)

Abraço!
Dupla Vista - Uma Semente Espírita

#15 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 26/02/2008, 12:48

O que acontece no IE ? Erro ? Tem a mensagem ae ?
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...
Voltar para HTML, CSS e Metodologias


0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → HTML, CSS e Metodologias
  4. Privacy Policy
  5. Regras ·
IPB Skin By Virteq