thm/test-card
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: add DPR

Browse source
This commit is contained in:
Tomáš Mládek 2025-02-11 21:35:10 +01:00
parent 2329f5235a
commit cd1c0651eb
1 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/lib/ScreenInfo.svelte
View file

@ -5,14 +5,16 @@
let screenResolution = '... x ...'; let screenResolution = '... x ...';
let windowResolution = ''; let windowResolution = '';
let dpr = "1";
function updateResolution() { function updateResolution() {
const realWidth = Math.round(screen.width); const realWidth = Math.round(screen.width) * window.devicePixelRatio;
const realHeight = Math.round(screen.height); const realHeight = Math.round(screen.height) * window.devicePixelRatio;
const windowWidth = Math.round(window.innerWidth * window.devicePixelRatio); const windowWidth = Math.round(window.innerWidth * window.devicePixelRatio);
const windowHeight = Math.round(window.innerHeight * window.devicePixelRatio); const windowHeight = Math.round(window.innerHeight * window.devicePixelRatio);
screenResolution = `${realWidth} x ${realHeight}`; screenResolution = `${realWidth} x ${realHeight}`;
windowResolution = `${windowWidth} x ${windowHeight}`; windowResolution = `${windowWidth} x ${windowHeight}`;
dpr = String(Math.round(window.devicePixelRatio * 100) / 100);
} }
onMount(() => { onMount(() => {
@ -33,6 +35,9 @@
<div class="value">{windowResolution}</div> <div class="value">{windowResolution}</div>
</div> </div>
{/if} {/if}
{#if dpr !== "1"}
<div class="dpr">{$i18n.t("Device Pixel Ratio")}: {dpr}</div>
{/if}
</div> </div>
</div> </div>
@ -45,7 +50,7 @@
font-weight: bold; font-weight: bold;
} }
.window { .window, .dpr {
margin-top: calc(1em / 0.8); margin-top: calc(1em / 0.8);
font-size: 0.8em; font-size: 0.8em;
} }