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

Question

我想根据屏幕大小加载不同的主页。任何人都可以帮忙吗？

例如， 对于屏幕尺寸 < 960 像素，我想将默认登录页面显示为 index1.html 和 对于屏幕尺寸 > 960 像素，我想将默认登录页面显示为 index2.html

提前致谢。

Answer 1

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

然后使用媒体查询将这两个类的显示值设置为non或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>