Estou com um problema:
Na página http://www.magicforbaby.com.br/, tem um banner onde não consigo definir o tamanho dele (da div).
Mas como ele pega todos os 100% da tela, peguei window.innerWidth
do browser e fiz meus cálculos.
Para Desktops e Androids vai bem. mas para Windows Phone não funciona. Parece que ele até calcula o height mas ignora o width
<div class="cycle-slideshow slide"
data-cycle-fx=fadeout
data-cycle-timeout=5000
data-cycle-pause-on-hover="true"
data-cycle-slides="div.slide">
<!-- prev/next links -->
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
<div class="cycle-pager"></div>
<div class="slide">
<img style="width:1024px;height: 640px;" src="_img/_banner/_site/1.jpg" />
</div>
<div class="slide">
<img style="width:1024px;height: 640px;" src="_img/_banner/_site/2.jpg" />
</div>
<div class="slide">
<img style="width:1024px;height: 640px;" src="_img/_banner/_site/3.jpg" />
</div>
<div class="slide">
<img style="width:1024px;height: 640px;" src="_img/_banner/_site/4.jpg" />
</div>
</div>
<script>
largura = (window.innerWidth * 640 ) / 1024;
$( ".slide img" ).css("height",largura);
$( ".banner" ).css("height",largura);
</script>
css de .slide img e de .banner
.banner {
display: inline-block;
height: 657px;
}
.slide {
width:100% !important;
}
Resultado, o banner aparece distorcido.
Esse código acima (indexConteudo.php) , é importado na página principal cujo código é:
<?php require_once "config.php" ; ?>
<!doctype html>
<html>
<head>
<title><?php echo $constantes->getTituloSite(); ?></title>
<?php require_once("_global/_meta/meta.ini"); ?>
<link rel="shortcut icon" type="image/x-icon" href="_img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="_global/_css/estilo.css">
<link rel="stylesheet" type="text/css" href="_global/_css/site.css">
<link rel="stylesheet" type="text/css" href="_global/_css/menu.css">
<link rel="stylesheet" type="text/css" href="_global/_css/jquery.cycle2.css">
<script type="text/javascript" src="_global/_js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="_global/_js/jquery.cycle2.min.js"></script>
<!--[if lt IE 9]>-->
<script type="text/javascript" src="_global/_js/css3-mediaqueries.js"></script>
<!--[endif]-->
<script>
window.onload=function(){
$("body").fadeIn("slow");
$(".carregando").fadeOut("slow");
}
</script>
</head>
<body>
<div class="carregando"><img src="_img/carregando.gif"><br>Carregando...</div>
<div class="topo">
<div class="sessoes">
<div class="logo"><img src="_img/logo.png" /></div>
<div class="menu"><?php require_once "_required/menu.php"; ?></div>
</div>
</div>
<div class="conteudo">
<div class="sessoes"><?php require_once "indexConteudo.php"; ?></div>
</div>
<div class="base">
<div class="sessoes"><?php require_once "_required/base.php"; ?></div>
</div>
<div class="final">
<div class="sessoes"><?php require_once "_required/final.php"; ?></div>
</div>
</body>
</html>
screen.width
?