javascript – window.innerWidth does not work on Windows Phone

Question:

I have a problem:

On the page http://www.magicforbaby.com.br/ , there's a banner where I can't define its size (of the div).

But since it takes all 100% of the screen, I got window.innerWidth from the browser and did my calculations.

For Desktops and Androids it goes well. but for Windows Phone it doesn't work. It seems that it even calculates the height but ignores the 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>

.slide img and .banner css

.banner {
    display: inline-block;
    height: 657px;
}

.slide {
    width:100% !important;
}

Result, the banner appears distorted.

This code above (indexConteudo.php) , is imported in the main page whose code is:

<?php require_once "config.php" ; ?>
<!doctype html>
<html>
  <head>
    <title><?php echo $constantes->getTituloSite(); ?></title>
    <?php  require_once("_global/_meta/meta.ini"); ?>
    <link type="image/x-icon" href="_img/favicon.ico" />
    <link type="text/css" href="_global/_css/estilo.css">
    <link type="text/css" href="_global/_css/site.css">
    <link type="text/css" href="_global/_css/menu.css">
    <link 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>

Answer:

You could try using css and solve this problem and still not use javascript processing because I believe that with css your case can be solved.

//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');}
Scroll to Top