JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

zoom level: <span id="zoomLevel"></span>
<br>
aspect ratio <span id="aspectRatio"></span>

JavaScript

$( document ).ready(function() {
    var screenCssPixelRatio = (window.outerWidth - 8) / window.innerWidth;
    $('#aspectRatio').text(screenCssPixelRatio);
if (screenCssPixelRatio >= .46 && screenCssPixelRatio <= .54) {
  zoomLevel = "-4";
} else if (screenCssPixelRatio <= .64) {
  zoomLevel = "-3";
} else if (screenCssPixelRatio <= .76) {
  zoomLevel = "-2";
} else if (screenCssPixelRatio <= .92) {
  zoomLevel = "-1";
} else if (screenCssPixelRatio <= 1.10) {
  zoomLevel = "0";
} else if (screenCssPixelRatio <= 1.32) {
  zoomLevel = "1";
} else if (screenCssPixelRatio <= 1.58) {
  zoomLevel = "2";
} else if (screenCssPixelRatio <= 1.90) {
  zoomLevel = "3";
} else if (screenCssPixelRatio <= 2.28) {
  zoomLevel = "4";
} else if (screenCssPixelRatio <= 2.70) {
  zoomLevel = "5";
} else if (screenCssPixelRatio <= 3.00) {
  zoomLevel = "6";
}else {
  zoomLevel = "unknown";
}
    $('#zoomLevel').text(zoomLevel);
});