49 lines
2.1 KiB
PHP
49 lines
2.1 KiB
PHP
<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>
|