0

i have a website and i was wondering if it is possible to set a condition in which when the screen is less than a certain size it will automatically open a different url?

the mobile version of website is completely different than my desktop one, so basically all i am asking is if it passible to load a different INDEX.html when the request comes from a smaller screen. also : is it possible to combine javascript, css and html only? (without jquery) thank you so much!

VANGOOSE
  • 55
  • 6

3 Answers3

3

All the above can be solved simply with JavaScript.

First we need to get the width, so we can call window.innerWidth or document.clientWidth for that.

Next we need to redirect if it's under a certain amount of pixels, so use window.location.

Finally we need to run the function when the page loads and when the view is resized.

function redirectMobileHandler() {
  const width = Math.max(document.clientWidth || 0, window.innerWidth || 0);
  if(width < 1000) {
    window.location = 'https://linktoyourmobilesite.com';
  }
}

window.onload = redirectMobileHandler();
window.onresize = () => redirectMobileHandler();

Alternatively you can either do a user agent check either with window.navigator on the client side, or by the User-Agent header on the server side to determine what kind of device it is.

Bren
  • 605
  • 4
  • 15
  • thank you so much for responding, i am just a beginner so it unclear to me . will it be rude to ask you what exactly i need to write in the html file and js file?. i never used this before – VANGOOSE Jul 09 '20 at 04:25
  • No problem, you can include it two ways. One way is simply enclosing the code in a script tag and just place it directly in the HTML. The second way is writing the code to a separate file with the .js extension and link the script in your HTML with – Bren Jul 09 '20 at 04:30
  • i tried it and it worked!! thank you , is there an easy way to make sure that if for example i am using my pc and narrowing/widening the screen it will do the redirect automatically as well? – VANGOOSE Jul 09 '20 at 04:39
  • 1
    Yes, just add a line under window.onload. Add window.resize = redirectMobileHandler(); Also I edited my answer to more accurately get width. – Bren Jul 09 '20 at 04:46
  • Also consider selecting my answer as the accepted one if that was the one that helped. Others who view this question may use the accepted answer instead of a solution that worked. – Bren Jul 09 '20 at 04:49
  • what is this do compare to your first answer? const width = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); – VANGOOSE Jul 09 '20 at 05:10
  • @VANGOOSE the double pipe is shorthand for "or" if the left side of the operator is considered to be a falsey value, it uses 0. Math.max() is simply taking in two values and returning the higher of the two. – Bren Jul 09 '20 at 05:12
  • thank you , the resize function doesnt work for some reason – VANGOOSE Jul 09 '20 at 05:16
  • I'm sorry it's supposed to be onresize, let me fix that. – Bren Jul 09 '20 at 05:27
0

As you said you can catch the width on which you want to load the other page

// when width equal 500px
if (window.innerWidth === 500) {
  //window.location = "path to new page"
}

hope this helped

Alpha Diallo
  • 76
  • 7
0

The answers given are work as long as you are only concerned for the screen width of the browser. But if you need to capture the actual screen width of the device then you need to use the 'screen' property.

function redirectToMobile() {
        if(screen.width < 1000) {
            window.location = 'YOUR LOCATION';
        }
    }
    
window.onload = redirectToMobile();
Maestro
  • 865
  • 1
  • 7
  • 24
lyadh_god
  • 11
  • 2
  • 3
  • Screen width takes into account the actual screen. Since he wants it to be responsive, this will not work. – Bren Jul 09 '20 at 04:48
  • thank you !! may i also ask how you will add a function to this that will redirect to mobile automatically if i am narrowing / widening the screen – VANGOOSE Jul 09 '20 at 04:49
  • @VANGOOSE for browser screen width responsiveness, use the answers provided by others. 'screen' is concerned with only the device's absolute width and the browser's width. – lyadh_god Jul 09 '20 at 04:55