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>

响应式数字标牌（高度）

1 个答案: