window.innerWidth does not work on Windows Phone

Asked

Viewed 112 times

3

I got a problem:

On the page http://www.magicforbaby.com.br/, has a banner where I can’t set its size (from div).

But as it takes all 100% of the screen, I took window.innerWidth from the browser and made my calculations.

For Desktops and Androids goes well. but for Windows Phone does not 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>

css of . slide img and . banner

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

.slide {
    width:100% !important;
}

Result, banner appears distorted.

This above code (indexConteudo.php) is imported on 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 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>
javascript jquery css css3

  • Have you tested with screen.width?

  • already, gives a value different from the screen: 317

  • added: <meta name="viewport" content="width=device-width, initial-Scale=1.0"> ? I’ve had a problem like this and adding it worked as expected.

  • Instead of using javascript, you can try using the @media property of css, so you can define custom css for each screen size, thus avoiding javascript incompatibility issues.

2 answers

0

You could try using css and solve this problem and still not using 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');}

0

I recommend using the $(window).width(). Since it is a jQuery method, it is compatible with all browsers.

It returns the width of the browser window (except the scroll bar). When there is no scroll, it returns the full width.

On mobile devices, the scroll does not take up space in width, so I think it best to calculate only the useful width of the screen, both in Disp. mobile as desktops.

Complementing:

Your code is incorrect too. Both the width as to the height should receive px (pixels) in the values, as below:

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

Browser other questions tagged javascript jquery css css3

You are not signed in. Login or sign up in order to post.