window.innerWidth does not work on Windows Phone

Question

window.innerWidth does not work on Windows Phone

Navigation

#1 by (0 votes)
#2 by (0 votes)

3

I have a problem:

In the page link , there is a banner where I can not define the size of the div.

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

For desktops and Androids goes well. but for Windows Phone does not work. It looks like it even calculates height but ignores 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 css img and .banner

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

.slide {
    width:100% !important;
}

Result, the banner appears distorted.

This code above (indexConteudo.php) is imported into 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

asked by anonymous 03.07.2016 / 22:11

2 answers

Coloring RichTextBox words How to Merge Cell in Reporting Services

score 0 · Answer 1

You could try to use 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');}

score 0 · Answer 2

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

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

On mobile devices, scrolling does not take up space in the width, so I think it's best to only calculate the useful width of the screen, furniture and desktops.

Complementing:

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

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