On mobile view home page not redirecting using jquery

Question

I have a website that I have built;

http://ryanotoolecollett.com/

That when resized to less than (<768px) or loaded when the window width is <768px it should redirect to;

http://ryanotoolecollett.com/portfolio

I have deployed this site on a linode server and was testing it with the ip address before hand and it was working on both mobile's and pc's.

However now after linking the domain, the redirect works on pc's when resizing and loading <768px however on mobile devices it renders a blank page (ie landing-page:display-none; ). But this is not meant to happen.

Here is the jquery code that I have written for this (it is in my document ready function)

 $(window).on('load resize',function(event){
  event.preventDefault();

  if($(window).width() < 768 && window.location.href == 'http://ryanotoolecollett.com'){

   window.location.href = "http://ryanotoolecollett.com/portfolio";

 }

});

Answer 1

In your if statement you're doing :

$(window).width() < 768 && window.location.href == 'http://ryanotoolecollett.com'

Which is fine, but window.location.href actually, equals http://ryanotoolecollett.com/ notice the forward slash at the end.

Answer 2

You can do this way :

if(window.innerWidth<786)
 window.location.href = "http://ryanotoolecollett.com/portfolio";