如何根据屏幕大小加载不同的主页

Question

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

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

提前致谢。

Answer 1

您已标记此问题responsive-design，但您正在询问如何进行“自适应设计”。响应式设计将拥有一个 HTML 页面，该页面可以根据正在查看的媒体进行调整，例如通过使用媒体查询。我不会讨论哪个更好，但如果你对响应式设计感兴趣，我会添加这个，以便你对谷歌有一些想法。

按照您的要求，一种方法是在您的页面上使用一些 JavaScript 来检查窗口的宽度并在必要时进行重定向：

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

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

Answer 2

我尝试了上述解决方案。它有效，但页面不断重新加载。通过这种方法解决了重新加载问题，并且我添加了一个可以在视口大小变化时自动重新加载页面的功能。

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

我知道这是不久前被问及回答的，但我认为我添加的解决方案比接受的答案更好，因为它不涉及重新加载并且适用于调整大小。定义两个 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>