Измените размер веб-страницы в соответствии с размером окна браузера, используя чистый JavaScript - PullRequest
Новая
       27

Измените размер веб-страницы в соответствии с размером окна браузера, используя чистый JavaScript

0 голосов
/ 13 мая 2019

У меня есть такая простая страница: 

<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 сработало.

...