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

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

比如说,， 对于小于960像素的屏幕，我希望将默认登录页显示为index1.html 和 对于屏幕大小>960 px，我希望将默认登录页显示为index2.html

---

提前感谢。

您已经标记了此问题

响应式设计

，但您正在询问如何进行“自适应设计”。响应式设计将具有一个HTML页面，可根据正在查看的媒体进行调整，例如使用媒体查询。我不会就哪一个更好展开辩论，但我会补充这一点，以防您对响应式设计感兴趣，从而对谷歌有一些想法

执行您要求的操作的一种方法是在页面上添加一点JavaScript，用于检查窗口的宽度，并在必要时重定向：

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

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

//在index2.html中
如果（window.innerWidth<960）{
window.location=“index1.html”；
}
//在index1.html中
如果（window.innerWidth>=960）{
window.location=“index2.html”；
}

您已经标记了此问题

响应式设计

，但您正在询问如何进行“自适应设计”。响应式设计将具有一个HTML页面，可根据正在查看的媒体进行调整，例如使用媒体查询。我不会就哪一个更好展开辩论，但我会补充这一点，以防您对响应式设计感兴趣，从而对谷歌有一些想法

执行您要求的操作的一种方法是在页面上添加一点JavaScript，用于检查窗口的宽度，并在必要时重定向：

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

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

//在index2.html中
如果（window.innerWidth<960）{
window.location=“index1.html”；
}
//在index1.html中
如果（window.innerWidth>=960）{
window.location=“index2.html”；
}

我尝试了上述解决方案。它工作了，但是页面一直在重新加载。通过这种方法解决了重新加载问题，我添加了一个函数，可以在视口大小改变时帮助自动重新加载页面

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

//视口大小更改时自动刷新页面
window.onresize=函数（事件）{
文档。位置。重新加载（true）；
}
var href=window.location.href.split（“/”）
var html_location=href[href.length-1]
如果（window.innerWidth>=960&&html\u位置！=“index.html”）{
window.location=“index.html”；
}
if（window.innerWidth<960&&html\u位置！=“index2.html”）{
window.location=“index2.html”；
}

我尝试了上述解决方案。它工作了，但是页面一直在重新加载。通过这种方法解决了重新加载问题，我添加了一个函数，可以在视口大小改变时帮助自动重新加载页面

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

//视口大小更改时自动刷新页面
window.onresize=函数（事件）{
文档。位置。重新加载（true）；
}
var href=window.location.href.split（“/”）
var html_location=href[href.length-1]
如果（window.innerWidth>=960&&html\u位置！=“index.html”）{
window.location=“index.html”；
}
if（window.innerWidth<960&&html\u位置！=“index2.html”）{
window.location=“index2.html”；
}

我知道这是不久前提出并回答的，但我认为我添加的解决方案比公认的解决方案更好，因为它不需要重新加载。定义两个CSS类，.HideOnMobile和.shownmobile在两个顶级DIV元素中使用它们

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

@介质（最大宽度：575.98px）{
HideOnMobile先生{
显示：无；
}
.shownmobile{
显示：首字母；
}
}
@介质（最小宽度：576px）{
HideOnMobile先生{
显示：首字母；
}
.shownmobile{
显示：无；
}
}

移动内容
桌面内容

我知道这是不久前提出并回答的，但我认为我添加的解决方案比公认的解决方案更好，因为它不需要重新加载。定义两个CSS类，.hidonmobile和.ShowOnMobile将它们用于两个顶级DIV元素

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

@介质（最大宽度：575.98px）{
HideOnMobile先生{
显示：无；
}
.shownmobile{
显示：首字母；
}
}
@介质（最小宽度：576px）{
HideOnMobile先生{
显示：首字母；
}
.shownmobile{
显示：无；
}
}

移动内容
桌面内容

谢谢，先生。它似乎起作用了。唯一的问题是当我调整浏览器大小时，我必须重新加载页面（Ctrl+F5）。我尝试了window.resize（）函数。但是它不起作用。看看，你可以定义一个窗口。OnReResig事件。你可能想考虑一下，如果你的网站每次调整屏幕大小时，它会给用户带来多大的麻烦。这不是一个好办法。你应该改用响应式设计，因为当你在维护一个移动和桌面站点时，它将避免以后的巨大麻烦。到目前为止，响应式设计一直是一个巨大的麻烦。我喜欢“为手机显示这些页面”、“为桌面显示不同页面”的想法。特别是在广告方面，当手机用户没有台式电脑时，给他们看一则桌面软件广告会让他们感到不快。谢谢，先生。它似乎起作用了。唯一的问题是当我调整浏览器大小时，我必须重新加载页面（Ctrl+F5）。我尝试了window.resize（）函数。但是它不起作用。看看，你可以定义一个窗口。OnReResig事件。你可能想考虑一下，如果你的网站每次调整屏幕大小时，它会给用户带来多大的麻烦。这不是一个好办法。你应该改用响应式设计，因为当你在维护一个移动和桌面站点时，它将避免以后的巨大麻烦。到目前为止，响应式设计一直是一个巨大的麻烦。我喜欢