根据屏幕大小为单个网站提供多个首页

Question

我已经做了网站(静态网站)的字体结束。我想使这个网站的多个主页根据屏幕大小。例如，移动屏幕大小的homepage1.html和桌面的homepage2.html，其余页面(服务、联系人)对于所有屏幕大小都是相同的。

所以请告诉我如何在不使用php的情况下做到这一点？

在php中，我们可以像这样导入

<?php include('homepage1.php') ?>

我想用html或js做同样的事情，然后我可以用js编写函数，比如如果屏幕尺寸小于700px，则导入homepage1.html。

如果你有任何其他想法来做同样的事情，那么请指导我..

提前感谢您:)

Answer 1

你可以通过添加一段简单的代码来实现。您可以添加更多的屏幕宽度。

<script type="text/javascript">
    $(window).on('load resize',function(){
        if($(window).width() < 950){
            window.location = "https://www.google.com"
        }
    });
</script>

比如

// In index2.php
if (window.innerWidth < 960) {
    window.location = "index1.php";
}

// In index1.php
if (window.innerWidth >= 960) {
    window.location = "index2.php";
}