Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal, todos aqui acho que já passaram por problemas de resolução de tela
Você faz um site olhando em tela de 1280 x 800 e seu cliente possuí uma maior e te fala que o layout está quebrando e tal!
Achei um site na Web que ajuda neste problema: http://viewlike.us/
Só que ele não está funcionando
Alguém conhece algo que faça o mesmo para que eu possa testar?
Conheço uma extensão do Mozilla (Web Developer Tools) só que não vi nenhuma diferença, não entendi a funcionalidade, não muda nada
Aguardo!
<!DOCTYPE html>
<html lang="pt-br">
<!-- International License Information:
[http://creativecommons.org/licenses/by-nc-sa/3.0/](http://creativecommons.org/licenses/by-nc-sa/3.0/)
[pt-br]
Testador multi-resoluções por Evandro Oliveira licenciado sob uma Creative Commons.
Atribuição: Uso Não-Comercial
Compatilhamento: pela mesma licença 3.0
Código original: [http://evandrofranco.com.br/lib/html/screen-test.html](http://evandrofranco.com.br/lib/html/screen-test.html)
Para maiores informações: evandrofranco [at] gmail [dot] com
Você pode:
- Compartilhar livremente o código em sua integridade, mantendo o nome do autor.
- Alterar e compartilhar alterações livremente, mantendo o link para o código original.
Você não pode:
- Vender, sob nenhuma circunstância, o material aqui disposto.
- Atribuir a autoria original a si ou a outrem.
- Remover o link de referência da licença CC 3.0.
-->
<head>
<title>Testador multi-resoluções</title>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
form {
padding: 3px;
text-align: center;
}
form input, form button {
margin: 0 2px;
}
iframe {
border: 1px dashed #000;
margin: 2px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var frame = document.getElementById('teste');
var frm = document.forms[0];
var w = frm['wdt'];
var h = frm['hgt'];
var u = frm['url'];
w.value = window.screen.width;
h.value = window.screen.height;
u.value = 'about:blank';
frame.width = w.value;
frame.height = h.value;
frame.src = u.value;
frm.onsubmit = function(){
frame.width = parseInt(w.value);
frame.height = parseInt(h.value);
if(u.value.indexOf(':') == -1) u.value = 'http://' + u.value;
frame.src = u.value;
return false;
}
}
</script>
</head>
<body>
<form action="" method="get">
URL: <input type="text" name="url" size="50">
Largura: <input type="text" name="wdt" size="4">
Altura: <input type="text" name="hgt" size="4">
<button type="submit">Testar</button>
</form>
<iframe id="teste" frameborder="0"></iframe>
</body>
</html>>
<!DOCTYPE html>
<html lang="pt-br">
<!-- International License Information:
[http://creativecommons.org/licenses/by-nc-sa/3.0/](http://creativecommons.org/licenses/by-nc-sa/3.0/)
[pt-br]
Testador multi-resoluções por Evandro Oliveira licenciado sob uma Creative Commons.
Atribuição: Uso Não-Comercial
Compatilhamento: pela mesma licença 3.0
Código original: [http://evandrofranco.com.br/lib/html/screen-test.html](http://evandrofranco.com.br/lib/html/screen-test.html)
Para maiores informações: evandrofranco [at] gmail [dot] com
Você pode:
- Compartilhar livremente o código em sua integridade, mantendo o nome do autor.
- Alterar e compartilhar alterações livremente, mantendo o link para o código original.
Você não pode:
- Vender, sob nenhuma circunstância, o material aqui disposto.
- Atribuir a autoria original a si ou a outrem.
- Remover o link de referência da licença CC 3.0.
-->
<head>
<title>Testador multi-resoluções</title>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
form {
padding: 3px;
text-align: center;
}
form input, form button {
margin: 0 2px;
}
iframe {
border: 1px dashed #000;
margin: 2px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var frame = document.getElementById('teste');
var frm = document.forms[0];
var w = frm['wdt'];
var h = frm['hgt'];
var u = frm['url'];
w.value = window.screen.width;
h.value = window.screen.height;
u.value = 'about:blank';
frame.width = w.value;
frame.height = h.value;
frame.src = u.value;
frm.onsubmit = function(){
frame.width = parseInt(w.value);
frame.height = parseInt(h.value);
if(u.value.indexOf(':') == -1) u.value = 'http://' + u.value;
frame.src = u.value;
return false;
}
}
</script>
</head>
<body>
<form action="" method="get">
URL: <input type="text" name="url" size="50">
Largura: <input type="text" name="wdt" size="4">
Altura: <input type="text" name="hgt" size="4">
<button type="submit">Testar</button>
</form>
<iframe id="teste" frameborder="0"></iframe>
</body>
</html>http://evandrofranco.com.br/lib/html/screen-test.html
Opa Evandro, vi aqui seu link, muito bom cara!
Meus parabéns, vou colocar aqui em meu servidor pra testar local!
Brigadão, muito sucesso a você
Abraço ;)
cara.. a diferença entre uma resolução e outra, para os sites é:
a área util do browser.
se você tem um monitor grande.. fica mais fácil perceber isso..
com o Web Developer ativado no Firefox.. vá em:
Redimensionar > 800x600
pronto, você vai ver tua página, como uma pessoa que esteja nessa resolução veria.. (área útil do browser)
Redimensionar > Editar Tamanhos
você pode configurar novas resoluções.