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;
}