Ir para conteúdo

Arquivado

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

Viniciuss Borges

zoom out e tamanho de fontes

Recommended Posts

Olá,

Percebi que quando se da zoom out, no chrome, opera, firefox, etc, acontece de a fonte não diminuir corretamente o seu tamanho e acaba quebrando o layout.

Fiz um html de exemplo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}

		div{
			width: 800px;
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -400px;
		}

		a{
			font-size: 16px;
		}
	</style>
</head>
<body> 
	<div>
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
		<a href="#">asdasd</a> 
	</div>
</body>
</html>

Se você executa-lo e der zoom out, umas 3 ou 4 vezes, verá que a segunda linha de link ficará cheia e terá alguns na terceira, diferente de quando o zoom está em 0, que ocupa 1 linha e meia.

 

O problema nem seria tão grave assim, se não fosse de o site ter de rodar em dispositivos móveis, que por sua vez, tem uma facilidade enorme em dar zoom.

 

Estava pensando em identificar se foi dado zoom, ou algo do tipo, mas to sem ideias, se alguém tiver uma sujestão, estamos ai.

 

Vlw.

Vinicius

Compartilhar este post


Link para o post
Compartilhar em outros sites

acho trabalhoso, mas uma alternativa seria crar um css global e um outro com regras especificas para dispositivos moveis, que acredito eu, tem como identificar, fica a dica :thumbsup:

Compartilhar este post


Link para o post
Compartilhar em outros sites

Mas isso ocorre não somente em mobiles, mas desktop também.

O que preciso, seria alguma forma de identificar se foi dado o zoom, que nível está o zoom e então setar o tamanho da fonte.

 

Num dispositivo móvel, é exibido normalmente, porém, quando da um zoom, essa fonte não diminui corretamente e o ultimo item do menu desce. O mesmo acontece quando se dá o zoom em um browser desktop.

 

Eu até poderia definir uma fonte 2px menor que resolveria. o problema é que o cliente é muito detalhista então não nem se eu quisesse, poderia deixar isso passar despercebido.

 

Muito obrigado pela sujestão, mas infelizmente não seria uma solução.

 

Continuarei na tentativa, caso alguem tiver uma outra ideia...

 

Vlw!

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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