<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>
