Do Something If Screen Width Is Less Than 960 Px

Do something if screen width is less than 960 px

Use jQuery to get the width of the window.

if ($(window).width() < 960) {
   alert('Less than 960');
}
else {
   alert('More than 960');
}

Add width of the screen to a class if screen width is less than 960 px

Try with jQuery

$(window).resize(function(){
  var width = $(window).width();
  console.log(width);
  if (width < 960){
    $('.reverse').css('width', width);
  };
});

This way you're constantly checking the window's width while resizing as well.

Show warning if user's browser width is less than x

We use hostlistener to check window size during resize, but we also check width on component init ngOnInit() because component might start without resize event.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  host: {
    '(window:resize)': 'onWindowResize($event)',
  },
})
export class AppComponent implements OnInit {
  name = 'Angular';
  width: number = window.innerWidth;
  height: number = window.innerHeight;
  goodWidth: number = 1600;

  ngOnInit(): void {
    this.getInitSize();
  }

  getInitSize() {
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.shouldAlert();
  }

  onWindowResize(event) {
    this.width = event.target.innerWidth;
    this.height = event.target.innerHeight;
    this.shouldAlert();
  }

  shouldAlert() {
    if (this.width < this.goodWidth) {
      window.alert(
        'warning message to the user if user is trying to view the application with less than 1600 width'
      );
    }
  }
}

Working example: https://stackblitz.com/edit/angular-window-width-1qbtpx?file=src%2Fapp%2Fapp.component.ts

Only execute function when screen size is above 992

While you want to execute the function on window resize and scroll .. it'll be better to create a function .. you need to put the if statement inside an event not the event inside the if

$(document).ready(function(){
  $(window).on('scroll resize' , Scroll_Action)
});

function Scroll_Action(){
    if($(window).scrollTop() < 20 && $(window).width() > 992){
        $('.navbar-brand').stop(true,true).fadeIn("slow");
        $('.image-scroll').css('display', 'None');
    } else {
        $('.navbar-brand').stop(true,true).fadeOut("slow");  
        $('.image-scroll').css('display', 'block');
    }
}

if screen resolution is less than x append css

You can do this entirely with CSS using the @media command.

@media (max-width:960px) { css... } //nothing with screen size bigger than 960px

@media (min-width:960px) { css... } //nothing with screen size smaller than 960px

See here

Jason Whitted makes a good point, this is CSS 3 only, so it won't work with older browsers (it should work with all modern browsers though). See here for compatibility. Your main problems will be IE 8 and less.

Edit - device selection

@media screen { .nomobile { display: block; } } //desktops/laptops

@media handheld { .nomobile { display: none; } } //mobile devices

Or you could assume mobile devices will have a smaller width, and go on that.

---

Related Topics