Question

我有一个简单的页面，像这样：

<html>
<body>

<h1>Table</h1>

 <table>
  <tr>
    <th>row1</th>
    <th>row2</th>
  </tr>
  <tr>
    <td>text1</td>
    <td>text2</td>
  </tr>
</table> 

</body>
</html>

现在，我尝试做的是在调整浏览器窗口大小时尝试缩放此简单表。我知道可以像这样使用transform和jquery来完成：

function updateScale() {

    var ww = $win.width();
    var wh = $win.height();
    var newScale = 1;

    // compare ratios
    if(ww/wh < baseSize.w/baseSize.h) { // tall ratio
        newScale = ww / baseSize.w;
    } else { // wide ratio
        newScale = wh / baseSize.h;        
    }

    $lay.css('transform', 'scale(' + newScale + ',' +  newScale + ')');

    console.log(newScale);
}

$(window).resize(updateScale);

但是我如何使用纯JavaScript进行缩放？我应该重新计算宽度/高度吗？还是我也必须扩展每个td？我的目标是按比例缩放网站以适合浏览器窗口，但是我想使用纯JavaScript来做到这一点，那是我不了解触发resize事件时应该更改哪些属性的地方。

使用纯JavaScript

0 个答案: