浏览器调整大小时的 JavaScript 重新加载到不同的页面

Question

我最近制作了一个网站来玩得开心。我有两个显示器，一个 15 英寸，一个 24 英寸。我在网站上遇到了问题，在 15 英寸显示器上时，它在登录页面上看起来很奇怪。我想我会做一些 javascript，所以当它检测到 15"英寸以下的东西时，它会重新加载页面并转到移动版本。它可以工作，但有人可以帮助我在调整大小时自动重新加载到移动页面吗？我会很好。请不要判断，因为我对 JS 一无所知，但这就是我想出来的。如果有人能帮助我，我会很高兴的。

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

Answer 1

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.

Answer 2

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;
    }
}