3

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>
4
  • Já testaste com screen.width?
    – Sergio
    Commented 3/07/2016 às 20:24
  • já, dá um valor diferente do da tela: 317 Commented 3/07/2016 às 20:43
  • adicionou: <meta name="viewport" content="width=device-width, initial-scale=1.0"> ? Já tive um problema parecido com este e adicionando a mesma funcionou como esperado. Commented 23/03/2017 às 18:27
  • Ao invés de usar javascript, você pode experimentar usar a propriedade @media do css, dessa forma você consegue definir css personalizados para cada tamanho de tela, assim evitando problemas de incompatibilidade do javascript.
    – Will Ramos
    Commented 9/05/2017 às 14:17

2 Respostas 2

0

Você poderia tentar utilizar css e resolver esse problema e ainda não utilizar-se de processamento javascript pois acredito que com css seu caso possa ser resolvido.

//Html

<div class="slide">    
   <div class="banner slide1"></div>
</div>

<div class="slide">    
   <div class="banner slide2"></div>
</div>

....

//Css

.banner{
 width: 100%;
 height:auto;
 background-size: cover;
}
.slide1{background-image: url('url da imagem 1');}
.slide2{background-image: url('url da imagem 2');}
.slide3{background-image: url('url da imagem 3');}
0

Recomendo usar o $(window).width(). Como é um método jQuery, é compatível com todos os navegadores.

Ele retorna a largura da janela do navegador (exceto a barra de scroll). Quando não há scroll, ele retorna a largura completa.

Em dispositivos móveis, o scroll não ocupa espaço na largura, portanto, acho melhor calcular apenas a largura útil da tela, tanto em disp. móveis quanto desktops.

Complementando:

Seu código está incorreto também. Tanto o width quanto o height devem receber px (pixels) nos valores, como abaixo:

$( ".slide img" ).css("height",largura+"px");
$( ".banner" ).css("height",largura+"px");

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 .