http://g.co/racer のように、複数のデバイス間で画面の見た目を揃えるにはどうしたらいいのでしょうか？

まずはCSSの実寸指定やviewportを使うことを考えたのですが、これらを使っても画面上でのサイズを正確に指定することはできないようで、失敗。

<!--次のコードでは、画面上に表示される要素のサイズは1cmになりません。-->
<div style="width:1cm:height:1cm"></div>

JSから取り込まれる要素のサイズは、viewportの指定に関係なく一定だということに気づいたのですが、それとJSから取得されるスクリーンサイズを計算しても、デバイスの実寸にはなりませんでした。

//スクリプトから、幅1cmを指定した要素の幅を取得するも、これも当てにならない模様
console.log(screen.availWidth/document.getElementById("width_1cm").offsetWidth);

スクリーンの幅をCSSで幅100vwに設定した要素から取得しても同じ結果に。
調べてみると、https://developer.mozilla.org/ja/docs/Web/CSS/Length の記述によれば、CSSの絶対単位はデフォルトで96dpiを基準に定められていて、正確なサイズを出すのには使えないのだそうで……ならば、一体上記のRACERはどのようにして画面サイズを揃えているんでしょうか？
お分かりの方おられましたら、よろしくお願いいたします。