Question

我尝试根据屏幕大小重定向页面，我有两个不同的索引文件，一个用于移动版本的Web，第二个用于Web版本。

在我的网络版索引文件中包含：

<script>
    if (screen.width <= 767) window.location.replace("./m/index.html")
        else window.location.replace("index.html")
</script>

在移动索引页面上我已经包含：

<script>
    if (screen.width >= 767) window.location.replace("../index.html")
        else window.location.replace("index.html")
</script>

问题是其中两个索引页保持刷新，页面没有加载。

这里似乎有什么问题，谢谢你的帮助。

Answer 1

你可以使用resize javascript事件，就像Tushar所说。

window.addEventListener("resize", getTemplate);

CurrentPage = 'DesktopPage';

function getTemplate() {
    if (screen.width >= 767 && CurrentPage != 'DesktopPage') {
        return window.location.replace("desktop.html");
    }

    if (screen.width < 767 && CurrentPage != 'MobilePage') {
        return window.location.replace("mobile.html");
    }
}

getTemplate();

这将检查您当前的页面和屏幕大小，因为如果您已经在桌面页面中，则无法重定向到桌面页面。

您还可以添加更多版本，例如＆＃34; SmallerMobilePage＆＃34;。

window.addEventListener("resize", getTemplate);

CurrentPage = 'SmallerMobilePage';

function getTemplate() {
    if (screen.width >= 767 && CurrentPage != 'DesktopPage') {
        return window.location.replace("desktop.html");
    }

    if (screen.width < 767 && CurrentPage != 'MobilePage') {
        return window.location.replace("mobile.html");
    }

    if (screen.width <= 480 && CurrentPage != 'SmallerMobilePage') {
        return window.location.replace("smaller_mobile.html");
    }
}

getTemplate();

根据屏幕尺寸替换页面

1 个答案: