Search code examples
htmlcsshttpwebresponseadaptive-design

How to Load Different Home Page according to screen size

I want to load different home page according screen size. Can anyone help about it ?

For Example, for screen-size < 960 px I want to display default landing page as index1.html and for screen-size > 960 px I want to display default landing page as index2.html

Thanks in advance.

Solution

  • You've tagged this question responsive-design, but you are asking about how to do "adaptive design." Responsive design would be having a single HTML page that adjusts to the medium it is being viewed in, for example by using media queries. I won't get into a debate about which is better, but I add this in case you're interested in responsive design so that you have some ideas to google.

    A way to do what you are asking is to have a bit of JavaScript on your page that checks the width of the window and redirects if necessary:

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

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