根据屏幕大小为单个网站设置多个主页

Question

I have made font end of website(static website). I want to make multiple home pages for this website according to screen size. for example homepage1.html for mobile screen size and homepage2.html for desktop, and remaining pages(services, contact) would be same for all screen size.

so please help me how to do this without using php?

in php we can import like this

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

i want to do this same thing using html or js, then i can write function in js like if screen size is less than 700px then import homepage1.html.

If you have any other idea to do this same thing then please guide me..

Thank you in advance :)

Answer 1

You can do it by adding a simple code. You can add more screen width.

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

Such as

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

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