defalt2111/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix resizing issue on mobile

Browse Source
This commit is contained in:
Antonio Ledebuhr
2026-01-21 08:16:07 +01:00
parent 11b132756a
commit f4bffc353b
1 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/components/dot-background/dot-background.ts
View File

@@ -1,4 +1,4 @@
import {afterNextRender, AfterViewInit, Component, ElementRef, NgZone, OnDestroy, ViewChild} from '@angular/core'; import {afterNextRender, Component, ElementRef, NgZone, OnDestroy, ViewChild} from '@angular/core';
import {Dot} from '../../models/dot'; import {Dot} from '../../models/dot';
@Component({ @Component({
@@ -49,8 +49,17 @@ export class DotBackground implements OnDestroy {
private resize = () => { private resize = () => {
const canvas = this.canvasRef.nativeElement; const canvas = this.canvasRef.nativeElement;
canvas.width = window.innerWidth; const viewport = window.visualViewport;
canvas.height = window.innerHeight;
if (viewport) {
// Modern browsers
canvas.width = Math.round(viewport.width * viewport.scale);
canvas.height = Math.round(viewport.height * viewport.scale);
} else {
// Fallback
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
// Clamp dots to new bounds // Clamp dots to new bounds
for (const dot of this.dots) { for (const dot of this.dots) {