Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

china_black

Testando em Várias Resoluções

Por , em Desenvolvimento frontend

Recommended Posts

china_black    0

china_black
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

 

<!DOCTYPE html>
<html lang="pt-br">
	<!-- International License Information:
	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
		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

Compartilhar este post

Link para o post
Compartilhar em outros sites

china_black    0

china_black
Postado

 

<!DOCTYPE html>
<html lang="pt-br">
	<!-- International License Information:
	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
		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 ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito