基于窗口宽度从javascript简单加载HTML页面

希望这是一个简单的问题。我创建了3个基于不同大小的html文件。基本上，我想做的是根据客户端计算机/智能手机的大小（宽度）加载特定页面

例如，在main

index.html

中输入

If (page.width < 321)
Load index320.html
Else if (page.width > 320) and (page.width < 481)
Load index480.html
Else load indexother.html

If（页宽<321）
加载index320.html
否则如果（页宽>320）和（页宽<481）
加载index480.html
Else加载indexother.html

您应该使用媒体查询来检查设备的宽度，然后使用css以不同的方式显示页面。

我的最佳猜测是使用

XMLHttpRequest

来执行此操作

首先决定应该加载哪个页面。之后，加载页面。例如：

var width = window.innerWidth;
var page;

if (width < 321) {
    page = 'index320.html';
} else if (width >= 321 && width < 481) {
    page = 'index480.html';
} else {
    page = 'indexother.html';
}

// http://stackoverflow.com/questions/3038901/how-to-get-the-response-of-xmlhttprequest
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        // do some stuff with the content
        alert(xhr.responseText);
    }
}

xhr.open('GET', page, true);
xhr.send(null);

var-width=window.innerWidth；
var-page；
如果（宽度<321）{
page='index320.html'；
}否则如果（宽度>=321&&width<481）{
页面='index480.html'；
}否则{
page='indexother.html'；
}
// http://stackoverflow.com/questions/3038901/how-to-get-the-response-of-xmlhttprequest
var xhr=new XMLHttpRequest（）；
xhr.onreadystatechange=函数（）{
if（xhr.readyState==XMLHttpRequest.DONE）{
//对内容做一些修改
警报（xhr.responseText）；
}
}
xhr.open（'GET'，page，true）；
xhr.send（空）；

从上面皮莫尔的答案开始，我想出了一些我现在使用的简单方法。我把它放在HTML页面的JavaCascript部分

<script>
  var width = window.innerWidth;
  var page;

  if (width < 321) {
    page = 'index320.html';
  } else if (width >= 321 && width < 781) {
    page = 'index480.html';
  } else {
    page = 'indexO.html';
  }

  //alert(width+page);  <-- used to test to see if it's actually working.
  var myWindow = window.open(page, "_self");

</script>

变量宽度=window.innerWidth；
var-page；
如果（宽度<321）{
page='index320.html'；
}否则如果（宽度>=321&&width<781）{
页面='index480.html'；
}否则{
page='indexO.html'；
}
//警报（宽度+页面）；你可以完全做到这一点。我建议您研究AJAX（如果您不想再次加载页面的话）

重定向到页面如果客户端稍后调整窗口大小怎么办？你应该查找“响应设计”或引导。可能是真的，但OP可能希望每个设备大小的内容都不同，不仅仅是样式。我很欣赏答案，但我已经找到了这一部分……问题是我需要什么代码行，应该放在哪里等。比如一个小例子。我写了伪代码，因为我不知道真正的代码。有太多的半吊子的答案…我想通过问简单的问题和得到完整的答案来解决这个问题，所以当有人进行搜索时，它可能会弹出：）如果我知道我会因为问一个我不会问的问题而得到缺点，这会让人觉得他们永远不应该问，因为害怕得到负面的回答（哦，是的，你是对的，不同的设备大小有不同的内容。写得很好，正是我所想的。谢谢！我想这是用javascript写的。我来试一试。