53 lines
1.2 KiB
Svelte
53 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { fade } from 'svelte/transition';
|
|
import { i18n } from '$lib/i18n';
|
|
|
|
let screenResolution = '... x ...';
|
|
let windowResolution = '';
|
|
|
|
function updateResolution() {
|
|
const realWidth = Math.round(screen.width);
|
|
const realHeight = Math.round(screen.height);
|
|
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">{$i18n.t('Screen Resolution')}</div>
|
|
<div class="value">{screenResolution}</div>
|
|
{#if windowResolution && windowResolution !== screenResolution}
|
|
<div class="window" transition:fade>
|
|
<div class="title">{$i18n.t('Window Resolution')}</div>
|
|
<div class="value">{windowResolution}</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.info {
|
|
text-align: center;
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.window {
|
|
margin-top: calc(1em / 0.8);
|
|
font-size: 0.8em;
|
|
}
|
|
</style>
|