html - How to Load Different Home Page according to screen size

Question

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.

Answer 1

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

Answer 2

I tried the above solution. It worked but the page was reloading continuously. By this approach solved the reload problem and I've added a function that can help reload the page automatically when viewport size change.

// refreshing page automatically when viewport size change  
window.onresize = function(event) {
  document.location.reload(true);
}

var href = window.location.href.split("/")
var html_location = href[href.length-1]

if (window.innerWidth >= 960 && html_location !== "index.html") {
    window.location = "index.html";
}

if (window.innerWidth < 960 && html_location !== "index2.html") {
    window.location = "index2.html";
}

Answer 3

I know this was asked and answered a while ago, but I think the solution I'm adding is better than the accepted answer as it involves no reloading and works on resizing. Define two CSS classes, .HideOnMobile and .ShowOnMobile and use them in two top level DIV elements.

Then use media queries to set the display value of those two classes to non or initial, to display or hide each DIV according to the screen width.

@media (max-width: 575.98px) {
  .HideOnMobile {
    display: none;
  }
  .ShowOnMobile {
    display: initial;
  }
}

@media (min-width: 576px) {
  .HideOnMobile {
    display: initial;
  }
  .ShowOnMobile {
    display: none;
  }
}

<div class="ShowOnMobile">
  MOBILE content
</div>
<div class="HideOnMobile">
  DESKTOP content
</div>