响应式数字标牌（高度）

Question

我做了一个天气页面。到目前为止，我让它在横向模式下工作，但我希望它在纵向模式下工作。现在我只能在普通屏幕上使用它：

这是我目前使用 bootstrap:

制作的脚本

<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>

问题是它在 android xibo 播放器的纵向模式下显示：

我希望它更像横向版本，它只显示 1 天。我希望它在不滚动的情况下显示每一个内容。高度是最大的问题，我无法正常工作。两张图片都是全高清网页。

Answer 1

好的，经过 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>

响应式数字标牌（高度）

Responsive Digital Signage (height)

css

android

responsive-design

twitter-bootstrap