Question

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

例如，对于屏幕尺寸＆lt; 960 px我想将默认登录页面显示为index1.html 和对于屏幕尺寸＆gt; 960 px我想将默认目标网页显示为index2.html

提前致谢。

Answer 1

您已对此问题responsive-design进行了标记，但您询问的是如何进行自适应设计。＆＃34;响应式设计将具有单个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>

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

3 个答案: