Obter as dimensões do elemento após a transformação CSS

Recentemente, tenho brincado muito com meta viewports por ver muitos aplicativos de TV em HTML5 codificados explicitamente para 1280×720, o que o senhor verá em muitos televisores HD. Todos nós sabemos que é uma prática muito melhor usar o design responsivo em vez de codificar as dimensões, mas, além disso, os meta viewports devem fazer o dimensionamento. Portanto, são as transformações CSS, especificamente scale(), para ajudar.

Ao criar um meta viewport shim, precisei calcular as dimensões de um elemento depois que ele foi dimensionado. Propriedades como clientWidth e innerWidth retornarão a largura original do elemento, ignorando a transformação. Para obter o tamanho em escala, o senhor deve usar getBoundingClientRect:

var originalWidth = myElement.innerWidth; // 1280
var originalHeight = myElement.innerHeight; // 720

originalElement.style.transform = 'scale(1.5)';

console.log(originalElement.getBoundingClientRect());

/*
ClientRect {
  bottom: 1080
  height: 1080
  left: 0
  right: 1920
  top: 0
  width: 1920
}
*/

O exemplo acima define a escala e retorna diferentes dimensões de altura e largura desejadas com base na escala. getBoundingClientRect também retorna mais do que apenas altura e largura por coordenadas de posição.

Eu estava preocupado em não conseguir realizar essa façanha, mas o getBoundingClientRect foi a solução perfeita!