当仅浏览器窗口高度发生变化时，FitTextJS 插件不会调整文本大小

Question

当我调整窗口大小对角线时，我的 html 中有 7 个 id 为 1 到 7 的 div，然后 fittextjs 插件会调整 7 个 div 中的文本大小。

当我水平地调整窗口大小时，字体大小会减小/增大...

按预期不起作用是：当我仅垂直调整窗口大小时，字体大小不会减小/缩小。

我怎样才能使它适用于最后一个不工作的案例？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>FitText</title>

    <style type="text/css">
        body, html {
    width: 100%;
    height: 100%;   
    font-family: arial;
    /*overflow: hidden;*/
}

* { /* Every element which has a border or padding value puts this value inside the div */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 0;
    margin: 0;
}

._Z {
    width: 12.50%;
}

.Stack {
    display: table;
    height: 100%;
    float: left;
}

    .Stack li {
        list-style: none;
        display: table-row;
    }

        .Stack li div {
            display: table-cell;
        }

.horizontal-right {
    text-align: right;
}

.horizontal-center {
    text-align: center;
}

.vertical-center {
    vertical-align: middle;
}

#responseView {
    height: 100%;
}   
    </style>

    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

<body>

<div id="responseView" data-bind="swipeLeftRightContentViews: $root.showMapView">
        <div style="height: 100%;"> 
           <ul class="Stack _Z" data-bind="foreach: replyTimeStack.segments">

             <li style="height:14.2%;background: green; color: black;">
                    <div id="div1" style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">1</div>
                </li>
             <li style="height:14.2%;background: green; color: black;">
                    <div id="div2"  style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">2</div>
                </li>
             <li style="height:14.2%;background: green; color: black;">
                    <div id="div3"  style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">3</div>
                </li>
             <li style="height:14.2%;background: green; color: black;">
                    <div id="div4"  style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">4</div>
                </li>
                <li style="height:14.2%;background: yellow; color: black;">
                    <div id="div5"  style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">5</div>
                </li>
              <li style="height:14.2%;background: orange; color: black;">
                    <div id="div6"  style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">6</div>
                </li>
              <li style="height:14.2%;background: green; color: black;">
                    <div id="div7"  style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">7</div>
                </li>

            </ul> 

        </div>       
   </div>   

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="jquery.fittext.js"></script>
    <script type="text/javascript"> 
        $("#div1").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
        $("#div2").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
        $("#div3").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
        $("#div4").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
        $("#div5").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
        $("#div6").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
        $("#div7").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
    </script>

</body>
</html>

Answer 1

为了让它像那样工作，您应该在脚本中调整它们的调整大小功能...设置为根据高度而不是宽度来测量字体大小。

$this.css('font-size', Math.max(Math.min($this.height() / (compressor*2), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));

这应该使它根据高度工作..

干杯！