如何根据屏幕尺寸加载不同的主页

Question

我想根据屏幕尺寸加载不同的主页。有人可以帮忙吗？

例如，对于屏幕大小 < 960 px，我想将默认登陆页面显示为 index1.html，对于屏幕大小 > 960 px，我想将默认登陆页面显示为 index2.html

提前致谢。

Answer 1

我知道不久前有人问过这个问题并回答过这个问题，但我认为我添加的解决方案比公认的答案更好，因为它不需要重新加载并且可以调整大小。定义两个 CSS 类 .HideOnMobile 和 .ShowOnMobile 并在两个顶级 DIV 元素中使用它们。

然后使用媒体查询将这两个类的显示值设置为none或initial，以根据屏幕宽度显示或隐藏每个DIV。

更新：已接受答案的作者在下面善意地评论说，他们认为这个答案最能解决问题背后的问题。

@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>