Can JavaScript be utilized to resize all elements on the viewport based on a percentage of their initial dimensions upon triggering an event?

edit

Yes, JavaScript can be utilized to resize all elements on the viewport based on a percentage of their initial dimensions upon triggering an event. This can be achieved using CSS transformations and the scale() function. Here is an example code snippet:

const resizeElements = (percentage) => {
  const elements = document.querySelectorAll('body *');

  elements.forEach(element => {
    const width = element.offsetWidth;
    const height = element.offsetHeight;

    element.style.transform = `scale(${percentage / 100})`;
    element.style.width = `${width}px`;
    element.style.height = `${height}px`;
  });
}

// Trigger the resize on clicking a button
const button = document.querySelector('#resize-btn');
button.addEventListener('click', () => {
  resizeElements(50); // Resize to 50% of their initial size
});

This code will select all elements on the page and resize them to a percentage of their initial size when the button with ID resize-btn is clicked. You can adjust the percentage value passed to resizeElements() to achieve the desired result.