52 lines
1.2 KiB
Svelte
52 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { fade } from 'svelte/transition';
|
|
|
|
let screenResolution = '';
|
|
let windowResolution = '';
|
|
|
|
function updateResolution() {
|
|
const realWidth = Math.round(screen.width * window.devicePixelRatio);
|
|
const realHeight = Math.round(screen.height * window.devicePixelRatio);
|
|
const windowWidth = Math.round(window.innerWidth * window.devicePixelRatio);
|
|
const windowHeight = Math.round(window.innerHeight * window.devicePixelRatio);
|
|
screenResolution = `${realWidth} x ${realHeight}`;
|
|
windowResolution = `${windowWidth} x ${windowHeight}`;
|
|
}
|
|
|
|
onMount(() => {
|
|
window.addEventListener('resize', () => {
|
|
updateResolution();
|
|
});
|
|
updateResolution();
|
|
});
|
|
</script>
|
|
|
|
<div class="info">
|
|
<div class="resolution">
|
|
<div class="title">Screen Resolution</div>
|
|
<div class="value">{screenResolution}</div>
|
|
{#if windowResolution !== screenResolution}
|
|
<div class="window" transition:fade>
|
|
<div class="title">Window Resolution</div>
|
|
<div class="value">{windowResolution}</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.info {
|
|
text-align: center;
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.window {
|
|
margin-top: 1em;
|
|
font-size: 0.8em;
|
|
}
|
|
</style>
|