HTML page responsive only in browser

0

I've created a responsive html page, to run mostly on smartphones. However, in portable devices, in the vertical (standing) position, the background image is not "resized". In the browser, if I narrow the window to the maximum ("mimicking" the size of the smartphone), it works normally.

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><linkhref="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;
}
    
asked by anonymous 01.12.2014 / 18:30

1 answer

1

The problem is in the condition of your @media queries. You have set the condition only screen , ie your mobile will disregard these blocks. This is why your desktop browser renders normally and nothing happens on the phone.

To fix the problem, just remove all% w / o of your conditions. For example, in the first%% query that you have it looks like this:

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

And it should look like this:

@media (max-width: 768px)
    
02.12.2014 / 13:35