Отзывчивая цифровая вывеска (высота)

Я создал страницу погоды. Пока я работаю над пейзажем, но я хочу, чтобы он работал в портретном режиме. Сейчас у меня есть она работает только на обычном экране:Отзывчивая цифровая вывеска (высота)

Это сценарий я сделал до сих пор с помощью начальной загрузки:

<div class="col-md-12 col-sm-12"> 
    <div class="col-md-1 col-sm-1"></div> 
     <?php 

      foreach ($xml->forecast->time as $day) { 

       $dt = strtotime($day['day']); 
       echo 
       '<div class="col-md-2 col-sm-2" style="min-height: 80vh;float: left;"> 
        <div class="col-md-12 col-xs-12 col-sm-12"> 
         <h3 style="font-size: 2.7vw; text-align: center;><a href="#">' . date("l", $dt) . '</a></h3> 
        </div> 
        <div class="col-md-12 col-xs-12 col-sm-12"> 
         <img src="images/' . $day->symbol['var'] . '.png" alt="icon" style="max-width: 90%;"> 
        </div> 
        <div class="col-md-12 col-xs-12 col-sm-12" style="margin-top: 15px;"> 
         <h1 style="font-size: 10vh; float: left;">' . floor($day->temperature['day']) . '&deg;</h1> 
         <br> 
         <h5 style="font-size: 5vh; float: right; margin-top: 10vh;"> ' . floor($day->temperature['min']) . '&deg;</h5> 
        </div> 
       </div>'; 

      } 

     ?>  
    <div class="col-md-1 col-sm-1"></div>  
</div>

Проблема заключается в том, что он показывает это на андроид xibo плеера в портретном режиме:

Я хочу, чтобы она больше похожа на альбомной версии, он показывает только 1 день. Я хочу, чтобы он показывал каждый отдельный контент без прокрутки. Высота является самой большой проблемой для этого, что я не получаю ее работу. Оба изображения являются полноценной веб-страницей HD.

источник

2015-05-19 Pascal Lieverse

Позвольте мне сказать вам: если вы хотите 1/12 на смартфоне , просто нужно использовать col-xs-xx ... У вас есть класс с просто md или sm, поэтому «xs» не определен, замените col-md-xx на col-xs-xx ... После того, как вы взорветесь «col-xx-xx» вы должны обернуть дочерние элементы в div.row ex: col-xx-xx> div.row> (col-xx-xx + col-xx-xx) ... – pbenard

Ну, текст теперь перекрывается поэтому единственная проблема заключается в том, чтобы заставить текст реагировать, а также он все еще слишком высок, как вы видите в портретной версии. также он не работает на мобильном телефоне, а на экране телевизора. Я все еще пропускаю вторую температуру. –

Oke после 2 дней работы над этим я получил его, чтобы он работал!

Я использовал этот сценарий, чтобы сделать текст реагирующий:

<script> 
     $(document).ready(function() { 
      if (window.innerHeight > window.innerWidth) { 
       $(".day").css("font-size", "2.5vw"); 
       $(".first_temp").css("font-size", "5vw"); 
       $(".second_temp").css("font-size", "5vw"); 

      } 
      else { 
       $(".day").css("font-size", "4vh"); 
       $(".first_temp").css("font-size", "6vh"); 
       $(".second_temp").css("font-size", "4vh"); 
      } 
     }); 

    </script>

Также я изменил сценарий к этому:

<div class="col-md-12 col-sm-12 col-xs-12"> 
      <div class="col-md-1 col-sm-1 col-xs-1"></div> 
      <?php 
      foreach ($xml->forecast->time as $day) { 
       $dt = strtotime($day['day']); 
       echo '<div class="col-md-2 col-sm-2 col-xs-2" style="min-height: 80vh; text-align:center;"> 
         <h3 class="day" style="color: white; width: 100%; margin: 0 auto;><a href="#">' . date("l", $dt) . '</a></h3> 
         <img class"image" src="images/' . $day->symbol['var'] . '.png" alt="icon" style="width: 3vh; min-width: 90%; width: 100%;margin: 0 auto;"> 
         <h1 class="first_temp" style="font-size: 3vw; width: 100%;margin: 0 auto;">' . floor($day->temperature['day']) . '&deg;</h1><br> 
         <h5 class="second_temp" style="font-size: 1.5vw;margin-top: 10vw; width: 100%;margin: 0 auto;"> ' . floor($day->temperature['min']) . '&deg;</h5> 
         </div>'; 
       } 
      ?>  
      <div class="col-md-1 col-sm-1 col-xs-1"></div> 
     </div>

источник

2015-05-20 13:12:00

Отзывчивая цифровая вывеска (высота)

ответ

Смежные вопросы