Melhor Agora
Procure aqui
Usando CSS específico para resoluções de tela diferentes
16/05/2007 às 18:38, em Internet, ProgramaçãoVamos imaginar que ao analizar as estatísticas do sistema, verificamos que 30 % dos usuários utilizam resolução 800 x 600
e 8% utilizam ainda a resolução de 640 x 480 px. Com certeza o nível de rejeição de um sistema como esse, por melhores que sejam suas funcionalidades, será alto, pois a experiência que usuários passarão não será muito agradável.
Para tentar resolver esse problema podemos utilizar um recurso simples, em Java Script, hoje muito utilizado no chamado Ajax, fazendo com que o navegador reconheça a resolução do usuário e atribua um CSS específico àquela resolução. Vamos começar abaixo:
- No Index do seu Sistema / Site, ou qualquer outra página, abra as tags do Java Script para inciar o código:
<!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>Detectando Resolução de tela</title>
<script type=”text/javascript” language=”javascript”>
</script>
</head>
<body> …
A partir daí iniciamos com uma lógica bem simples de programação usando um If e um Else. Para detectar a resolução vamos utilizar a funcão screen.width e o método document.write para colocarmos a declaração das folhas de estilo específicas. O código abaixo, verifica se a resolução é maior ou igual a 1024 de largura, e se for verdadeiro insere no HTML a declaração do primeiro.css caso contrário mostrará o segundo.css
if (screen.width >= “1024″) {
document.write(‘<link rel=”stylesheet” href=”primeiro.css” type=”text/css” />’)
}
else {
document.write(‘<link rel=”stylesheet” href=”segundo.css” type=”text/css” />’)
}
Essa técnica aconselho a usar somente no posicionamento de objetos, definição de largura, número de colunas entre outros, para evitar utilizar muitos CSS e surgimento de erros. Como último detalhe, atento vocês de uma coisa: caso o navegador do usuário não suporte javascript, seu css não aparecerá, e sua aplicação ficará quebrada. Para resolver esse problema utilize de um Hack bem simples: antes de inciar o javascript, coloque a declaração de uma CSS Default, caso então a pessoa não possua Java Script o site ficará visível de qualquer forma. Veja o código completo abaixo:
<link rel=”stylesheet” href=”geral.css” type=”text/css” media=”screen” />
<script type=”text/javascript” language=”javascript”>
if (screen.width >= “1024″) {
document.write(‘<link rel=”stylesheet” href=”geral.css” type=”text/css” />’)
}
else {
document.write(‘<link rel=”stylesheet” href=”auxiliar.css” type=”text/css” />’)
}
</script>
Textos relacionados
6 Comentários sobre este texto
Escreve aí sua opinião
© 2007 - Melhor Agora - Qualquer dúvida entre no Setor de Reclamação - Copiar cuidadosamente, mas cite a fonte! :D
Os comentários publicados no blog são moderados pelo autor, com o intuito de preservar os usuários de spams e links suspeitos, como bem preservar a imagem do blog | Política de Privacidade
maio 17th, 2007 at 10:26
Está mais pra DHTML do que Ajax
Mas é uma boa dica!
maio 17th, 2007 at 10:38
Tutorial simples mas bem interessante, consegui esclarecer algumas duvidas com ele.
julho 8th, 2007 at 12:28
Só um detalhe para economizar código: se você já está definindo o default (geral.css) antes do js, não precisa incluí-lo novamente no if. Assim, neste caso, eliminaria o else.
junho 16th, 2008 at 10:24
nao funcionou comigo. Estava precisando exatamente disso, mas por algum motivo o java nao rolou…E aparentemente nao tem erros…
Alguem testou e funcionou???
dezembro 22nd, 2009 at 22:18
Estava procurando esse trecho de código o dia todo e achei aqui! .. e respondendo, testei e funcionou sim ! Solução: Qndo voce copia e cola direto; o codigo vai com um tipo de aspas, apague ela e reescreva. Comigo, de primeira tbm nao deu certo, mas fiz isso e funcionou! Obrigado; Abraços
setembro 1st, 2010 at 16:16
Ótimo post! Foi muito válido para mim também! Parabéns!