响应式数字标牌（高度）

Posted 2023-03-06

【中文标题】响应式数字标牌（高度）

【英文标题】：Responsive Digital Signage (height)

【发布时间】：2015-07-31 09:33:24

【问题描述】：

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

这是我目前使用引导程序制作的脚本：

<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"   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 天。我希望它在不滚动的情况下显示每一个内容。高度是我无法正常工作的最大问题。两张图片都是全高清网页。

【问题讨论】：

请允许我说你：如果你想在智能手机上使用 1/12，只需要使用 col-xs-xx ...你的课程只有 md 或 sm，所以'xs'不是定义后，用 col-xs-xx 替换 col-md-xx... 之后，当您爆炸“col-xx-xx”时，您必须将子项包装在“div.row”例如：col-xx-xx > div.row > (col-xx-xx + col-xx-xx)...

好吧，文本现在重叠了，所以唯一的问题是让文本响应，而且它仍然像你在纵向版本中看到的那样太高。它也不是在手机上运行，​​而是在电视屏幕上运行。我仍然错过了第二个温度。

【参考方案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"   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>