Ir para conteúdo

POWERED BY:

Arquivado

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

kaayasinho

CSS Media queryes

Por , em Desenvolvimento frontend

Recommended Posts

kaayasinho    0

kaayasinho
Postado

Boa tarde, gostaria de saber porque o iphone 4s 5 5s 6 6+ não estao reconhecendo as media queryes

 

eu estou fazendo tudo correto conforme é o certo, chega na hora de ler o site no iphone ele reconhece a configuaraçao normal para desktop

 

exemplo

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
body { padding: 15px; background:#eee; font-family: Arial, Helvetica, sans-serif }. .caixa { border: solid 1px #666;	padding: 5px 10px; margin: 40px; } .area-visivel span { color: #666; display: none; } /* max-width */ 
@media screen and (max-width: 600px) { .um { background: #F9C; } span.lt600 { display: inline-block; } } 
/* min-width */ 
@media screen and (min-width: 900px) { .dois { background: #F90; } span.gt900 { display: inline-block; } } 
/* min-width & max-width */ 
@media screen and (min-width: 600px) and (max-width: 900px) { .tres { background: #9CF; } span.bt600-900 { display: inline-block; } } 
/* max device width */ 
@media screen and (max-device-width: 480px) { .iphone { background: #ccc; } }

</style>
</head>

<body>

<h1>TESTANDO MEDIA QUERIE – RESOLUÇÃO DIFERENTE. </h1> <p>Mude o tamanho do seu navegador para ver as mudanças.</p> <div class="caixa um">Esta caixa ficará rosa se a área de visão for inferior a 600px</div> <div class="caixa dois">Esta caixa ficará laranja se a área de visão for maior que 900px</div> <div class="caixa tres">Esta caixa ficará azul se a área de visão estiver entre 600px e 900px</div> <div class="wrapper iphone">Esta caixa só será aplicável a dispositivos com max-device-width: 480px (ou seja, iPhone)</div> <p class="area-visivel"><strong>Sua área de visão atual é: </strong> <span class="lt600">menor que 600px</span> <span class="bt600-900">entre 600 - 900px</span> <span class="gt900">maior que 900px</span></p> 

Leia mais em: Utilizando CSS Media Queries http://www.devmedia.com.br/utilizando-css-media-queries/27085#ixzz3P0BszdSN
</body>
</html>

no desktop se eu abro no safari chrome etc, e redimenciono a tela ok.

mas quando abro no celular não pega... fica aparecendo que estou usando resoluçnao maior que 900px, ou seja a mesma de um desktop.

 

tentei usar essa linha de codigo tb

@media (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape){

no background ele até reconhece que eh um iphone, mas no geral o contúdo fica pequenininho como se fosse para desktop.

alguem sabe como contornar esse problema?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Faltou vc colocar a metatag viewport

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

Compartilhar este post

Link para o post
Compartilhar em outros sites

kaayasinho    0

kaayasinho
Postado

 

deve ser como meta tag? e nao quando eu chamo o css na pagina?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Uma coisa é uma coisa, outra coisa é outra coisa.

 

O CSS é para vc definir os estilos para cada resolução

A metatag é para informar o dispositivo que a largura que ele deve usar é a largura que aparenta ter, e não a da resolução dele, q é de vários pixels por pixel.

 

Vc tem q colocar os 2. O css com media queries e a metatag viewport.

Compartilhar este post

Link para o post
Compartilhar em outros sites

kaayasinho    0

kaayasinho
Postado

Uma coisa é uma coisa, outra coisa é outra coisa.

 

O CSS é para você definir os estilos para cada resolução

A metatag é para informar o dispositivo que a largura que ele deve usar é a largura que aparenta ter, e não a da resolução dele, q é de vários pixels por pixel.

 

você tem q colocar os 2. O css com media queries e a metatag viewport.

 

vc nao entendeu minha pergunta, eu queria dizer se esse content 

content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"

eu poderia colocalo assim tambem quando eu chamo o css

 

<link rel="stylesheet" type="text/css" href="css/style.css" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

 

funcionaria?

 

 

 

de qualquer forma MUITO MUito obrigado.. salvou ja tava de cara quente com esse problema e não fazia ideia .

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não, não pode.

 

Tem que ser na metatag viewport. Na tag link não "existe".

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