clean

.hta_slug/what-is-my-screen-resolution.php

@@ -0,0 +1,48 @@
+<div class="container-zz mx-auto my-20">
+    <div style="display: flex; flex-direction: column; justify-content: center; align-items:center;">
+        <h2 style="font-size: 25px;">Your Screen Resolution:</h2>
+        <p style="font-size: 25px; text-align: center;" id="resolution"></p>
+        <p style="font-size: 25px; text-align: center;" id="innerRes"></p>
+        <!-- <p style="font-size: 25px; text-align: center;" id="asperatio"></p> -->
+    </div>
+</div>
+<script>
+    var screenWidth = window.screen.width;
+    var screenHeight = window.screen.height;
+    document.getElementById('resolution').innerHTML = "This is widescreen resolution - " + "Width: " + screenWidth + " x " + "Height: " + screenHeight + " Pixels";
+
+
+    var inner_width = window.innerWidth;
+    var inner_height = window.innerHeight;
+    document.getElementById('innerRes').innerHTML = "This is browser's inner resolution - " + "Width: " + inner_width + " x " + "Height: " + inner_height + " Pixels";
+
+    function getAspectRatio() {
+        const width = screen.width;
+        const height = screen.height;
+
+        // Calculate the greatest common divisor (GCD) for cleaner ratio representation
+        function gcd(a, b) {
+            return (b === 0) ? a : gcd(b, a % b);
+        }
+        const divisor = gcd(width, height);
+
+        // Simplify width and height by dividing with GCD
+        const simplifiedWidth = width / divisor;
+        const simplifiedHeight = height / divisor;
+
+        return `${simplifiedWidth}:${simplifiedHeight}`;
+        }
+
+        // Example usage
+        const aspectRatio = getAspectRatio();
+        // document.getElementById('asperatio').innerHTML = aspectRatio;
+        // console.log("Screen aspect ratio:", aspectRatio);
+
+   
+</script>
+
+<style>
+    .container-zz{width:100%}@media (min-width: 640px){.container-zz{max-width:640px}}@media (min-width: 768px){.container-zz{max-width:768px}}@media (min-width: 1024px){.container-zz{max-width:1024px}}@media (min-width: 1280px){.container-zz{max-width:1280px}}@media (min-width: 1536px){.container-zz{max-width:1536px}}
+    .mx-auto{margin-left:auto;margin-right:auto}
+    .my-20{margin-top:5rem;margin-bottom:5rem}
+</style>