0

Criei uma página html responsiva, para rodar principalmente em smartphones. Porém, nos dispositivos portáteis, na posição vertical (em pé), a imagem do fundo não se "redimensiona". Já no browser, se eu diminuir a janela ao máximo ("imitando" o tamanho do smartphone), funciona normalmente.

Html:

<html>
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>

<div class="wrap">

    <div class="content">

        <div class="logo">
            <h1><img src="images/bg2.png"/></h1>

        </div>


        <center>
        <div >
        <a href="http://infasstec.com.br/midia"><img src="images/midia_video.png"/></a>
        <a href="http://infasstec.com.br/midia"><img src="images/midia_revista.png"/></a>

            </div>
            </center>
     </div>
    </div>  
</div>

CSS:

@media only screen and (max-width: 768px)
{
.wrap {
width: 80%;
}   
.logo img {
width: 315px;
}
}
@media only screen and (max-width: 640px)
{
.wrap {
width: 85%;
}   
.logo {
padding: 1% 1% 12% 1%;
}
.buttom {
width: 515px;
}
.logo img {
width: 300px;
}
}
@media only screen and (max-width: 480px)
{
.wrap {
width: 90%;
}   
.logo {
padding: 1% 1% 12% 1%;
}
.buttom {
width: 440px;
}
/***/
.logo span {
font-size: 1.6em;
}
.logo img {
width: 270px;
}
}
@media only screen and (max-width: 320px)
{
.wrap {
width: 90%;
}   
.logo {
padding: 1% 1% 12% 1%;
}
.buttom {
width: 290px;
}
/***/
.logo span {
font-size: 1.4em;
}
.logo span img {
vertical-align: middle;
}
.logo img {
width: 200px;
}
4
  • Isso é porque o browser faz esse trabalho por si.
    – Jorge B.
    Commented 1/12/2014 às 17:44
  • O problema está na condição das suas @media queries. Você colocou a condição only screen, ou seja, seu mobile irá desconsiderar estes blocos. É por este motivo que o seu navegador no desktop renderiza normalmente e no celular nada acontece.
    – Oeslei
    Commented 2/12/2014 às 1:31
  • @Oeslei obrigado pela resposta! POde me ajudar em como deve ficar o código para funcionar?
    – Rene Sá
    Commented 2/12/2014 às 9:15
  • @ReneSá adicionei uma resposta mais mostrando como corrigir o problema. Espero que ajude =)
    – Oeslei
    Commented 2/12/2014 às 12:36

1 Resposta 1

1

O problema está na condição das suas @media queries. Você colocou a condição only screen, ou seja, seu mobile irá desconsiderar estes blocos. É por este motivo que o seu navegador no desktop renderiza normalmente e no celular nada acontece.

Para corrigir o problema basta remover todos os only screen de suas condições. Por exemplo, na primeira @media query que você tem está assim:

@media only screen and (max-width: 768px)

E deve ficar assim:

@media (max-width: 768px)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .