JavaScript when brower resize reload to different page

Question

I recently made a website for a bit of fun.I have two monitors one 15"inch and one 24"inch.I had a problem with the website where it looked odd on the landing page when on the 15" inch monitor.I thought I would make some javascript so when it detects something under 15"inches it reloads the page and goes to the mobile version.It works but can someone help me make it auto reload to the moblie page when resized?I would be greatful.Please dont judge as I know nothing about JS but this is what I came up with.If anyone can help I would be greatful.

if (screen.width <= 1440) { reload(); document.location = "mobileindex.html"; }

That code is basically fine, apart from a few details. For one, it needs to be inside the event handler function for the `window`'s `onresize` event, and you should use `window.innerWidth` instead of `screen.width`. Finally, calling `reload();` will refresh the page, as if you had pressed F5. You'll want to remove that. `window.onresize = () => window.innerWidth < 1440 && document.location = "mobileindex.html";` — , Oct 17 '20 at 08:39

Hilton Siegert · Answer 1 · 2020-10-19T10:27:31.517

So what you're looking for is called an EventListener this will trigger on certain event such as resizing of the browser window.
Also you may want to look at https://www.w3schools.com/jsref/ as it is a really good resource for beginners.
As for the code to do this :

window.addEventListener("resize", function(){
    var width  = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (width <= 1440) window.location.replace("example.html"); 
});

[EDIT]

So working out screen size in Inches is a little more complex, the standard way is to use pixels but if you are set on using In here is a resource that you can use.
So it would be about picking usually 3 breaking points for you code, 3 screen widths.
Popular resolutions are 360x640 (mobile), 768x1024 (tablet) and 1366x768 (desktop).
So you would the end up with something like this:

window.addEventListener("resize", function(){
    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var currentPage = window.location.origin; 
    if (width <= 420 && !currentPage.includes("mobile")) window.location.replace("mobile.example.html"); 
    else if(width >= 1280 && !currentPage.includes("desktop")) window.location.replace("desktop.example.html"); 
    else if(!currentPage.includes("tablet")) window.location.replace("tablet.example.html"); 
});

The currentPage.includes("tablet") is to stop a redirect loop once you're on the correct page.

Thanks a bunch @HiltonSiegert.How may I make it go back to the normal index when it detects 24"inches? — ThatCoder124, Oct 17 '20 at 09:08
Sorry for the slow response. I've updated my answer to provide a bit more info. — Hilton Siegert, Oct 19 '20 at 10:27

score 0 · Answer 2 · answered Oct 19 '20 at 10:44

Can you not reload to a different page? Cause you said you want to switch to the mobile version... If my understandings are correct, the mobile version and the desktop version should have the same content, just different CSS styling. If that is so, you don't even have to use javascript.

//css file

//this is just an example
.body{
    margin: 10px;
    font-size: 100px;
}

//when the page is resized to 15inch or below, the bottom code will run
@media(max-width: 1440px //15inch){
    .body{
        margin: 0px;
        font-size: 50px;
    }
}

JavaScript when brower resize reload to different page

2 Answers2