window.innerWidth não funciona no Windows Phone

Carcleo · Julho 6, 2016

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>