How can I detect the screen resolution in Angular Universal?

Question

I am trying to detect the screen resolution of the browser in Angular Universal but I'dont get it, on the side of the browser, I use BreakpointObserver of Angular Material, but on the server is not working:

    this.breakpointObserver.observe(['(max-width: 575px)']).pipe(filter(result => result.matches == true)).subscribe((result: any) => 
    {   
        console.log('(max-width: 575px)', result)
        this.imageBackground = this.imageBackgroundPortrait;
    });

This It is ignored on the server. Any suggestions? Thanks.

My solution was to save the screen resolution in a cookie and pass it to the server. — user2146556, Dec 03 '19 at 18:32

redhatvicky · Answer 1 · 2019-12-03T14:23:47.987

When you want to update on resize you have to mention something like this :

@HostListener('window:resize', ['$event'])
onResize(event) {
  this.innerWidth = window.innerWidth;
}

Something like this should definitely work in any devices you encounter:

    export class Dashboard  {
 mobHeight: any;
 mobWidth: any;
     constructor(private router:Router, private http: Http){
        this.mobHeight = (window.screen.height) + "px";
        this.mobWidth = (window.screen.width) + "px";
          console.log(this.mobHeight);
          console.log(this.mobWidth)
     }
}

Detect window size using Angular 4 How to get height and width of device display in angular2 using typescript?

I want to do it just at the moment that the server renders, the user has two personalized images and depending of the resolution he chooses one or other. — user2146556, Dec 03 '19 at 14:01

C.OG · Answer 2 · 2019-12-03T14:25:47.257

1

This wouldn't work on the server, because on the server there is no "window", there is no "viewport" so it won't be defined. Hence why it's ignored on the server. In reality, you don't need it there.

What you can consider doing is using the picture tag. This allows the browser to use the most appropriate image for the viewport.

<picture>
  <source media="(min-width: 1100px)" srcset="https://cdn.dribbble.com/users/31348/screenshots/4892068/newport_1x.jpg" />
  <source media="(min-width: 650px)" srcset="https://cdn.dribbble.com/users/107759/screenshots/4891695/iphonex-simple-3_1.gif" />
  <img src="https://cdn.dribbble.com/users/1185900/screenshots/4890498/shopping_online_03.png" />
</picture>

Demo on codepen

edited Dec 03 '19 at 14:25

answered Dec 03 '19 at 13:12

C.OG

6,236
3
20
38

I want to do it just at the moment that the server renders, the user has two personalized images and depending of the resolution he chooses one or other, If I do this in the browser, the images may not match. – user2146556 Dec 03 '19 at 14:08
Thats the point, at the time the server renders, there is no viewport. The server doesn't know the width of of the browser window, only the browser knows that – C.OG Dec 03 '19 at 14:22
I have a problem with this, I need the image like background-image. – user2146556 Dec 03 '19 at 14:36

score 0 · Answer 3 · answered Dec 03 '19 at 12:52

you can try this on your Component

getScreenSize(event?) {
      this.scrHeight = window.innerHeight;
      this.scrWidth = window.innerWidth;
      console.log(this.scrHeight, this.scrWidth);
}

// Constructor
constructor() {
    this.getScreenSize();
}

How can I detect the screen resolution in Angular Universal?

3 Answers3