Question

我有这张桌子。我需要将它设置为始终为16乘9比率，顶行占用固定数量，底行占据页面的其余部分。当屏幕不是16乘9时，整个表格中的单个字体大小以及整个页面以页面为中心

<body class="clock">
        <table class="clocktable">
            <tr>
                <td id="clock" class="time">
                00:00:00</td>
                <td id="timer" class="timing">
                00:00:00</td>
            </tr>
            <tr>
                <td colspan="2" id="eventnotes" class="notesevent">
                Here</td>
            </tr>
        </table>
    </body>

该解决方案需要在桌面浏览器和移动设备上运行。我知道我可以用java脚本来做，并根据页面宽度调整每个元素的大小，但我觉得应该有更好的方法。

Answer 1

我猜你在访问javascript对象的密钥方面遇到了问题。您可以使用Object.keys。您可以使用jQuery.each遍历数组。请参阅下面的代码

var json = {
  "20:34:05": {
    "192.168.1.208": "foo"
  },
  "20:34:12": {
    "192.168.1.208": "bar"
  },
  "20:34:21": {
    "192.168.1.210": "bar foo"
  }
}


$.each(Object.keys(json), function(i, val) {
  var time = val;
  var ip = Object.keys(json[val])[0];
  var message = json[val][ip];

  console.log(time + " " + ip + " " + message);
})

Answer 2

决定使用Javascript和jQuery。该表的样式为100％宽度和页面高度。底行填充页面，因为顶行的高度已指定。

function resize() 
{
    var textheight = (($(window).width()) / 10);
    clocktable.style.fontSize = (textheight) + 'px';
    clock.style.height = (textheight*1.2) + 'px';
}

$(document).ready(function() {resize()});
$(window).resize(function() {resize()});

这是我的剧本。

固定比率页面自动缩放

2 个答案: