Javascript 如何根据屏幕大小发送不同的内容

我想提供不同的内容，根据是否一个页面 在大屏幕（PC/平板电脑）或小屏幕（手机）上观看。 我的网站反应灵敏，使用引导，但我有很多内容，这只适用于PC；它完全压倒了手机读者

当网站被关闭时，我如何提供不同的段落和图像内容 在更小的屏幕上观看

有人建议我使用javascript或（更糟糕的）媒体查询，但我不知道如何使用。 我是新手，你能提供一些示例代码吗

Thx

注1：这不仅仅是样式表问题。而不是渲染 相同的内容采用不同的格式，我想发送不同的内容

注2：我不想开发一个新的.mobi站点，它将丢失

---

我现有的搜索引擎声誉。

您应该看看这一点，它与您试图实现的目标非常相似：

您可以使用此代码检测移动设备：

function detectmob() { 

    if( navigator.userAgent.match(/Android/i)
    || navigator.userAgent.match(/webOS/i)
    || navigator.userAgent.match(/iPhone/i)
    || navigator.userAgent.match(/iPad/i)
    || navigator.userAgent.match(/iPod/i)
    || navigator.userAgent.match(/BlackBerry/i)
    || navigator.userAgent.match(/Windows Phone/i)
    ){

        // If mobile, then we do all this

    }
    else {

        // If not mobile then do this

    }
} // detectmob

-----------[编辑]-----------

var width = window.innerWidth;
var height = window.innerHeight;

if (width  > 480) {
    // Mobile code
} else {
    // Other code
}

-----------[编辑]-----------

var width = window.innerWidth;
var height = window.innerHeight;

if (width  > 480) {
    // Mobile code
} else {
    // Other code
}

创建两个文件，

mobile.html

和

desktop.html

，并为它们提供适当的内容。 然后，在主页中，将以下javascript放在页面的底部：

function getFileContent(file) {
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                var fileContent = rawFile.responseText;
                document.getElementsByTagName("body")[0].innerHTML = fileContent;
            }
        }
    }
    rawFile.send(null);
}

现在，您可以使用前面的javascript获取文件内容并根据访问者是在手机上还是在计算机上显示它们：

var width = window.innerWidth;
var height = window.innerHeight;

if (width  > 480) {
    // Mobile code
    getFileContent("mobile.html");
} else {
    // Other code
    getFileContent("desktop.html");
}

---

就这样！如果您需要任何进一步的帮助，请告诉我。

您可能需要查看引导文档的这一部分：

更糟

媒体查询？你在说什么，媒体查询是一个设计良好、响应迅速的网站的方法，我会做什么，而不是提供不同的内容，我会让设备决定要消费多少内容，因此如果你在移动设备中，你可以对你的服务器打一个

$.Ajax

电话，要求限制内容，相反，如果你在桌面上，你可以获取更多的数据。在前面的一个问题上，他引用了评论家（Paulie_D）的建议：“如果你要提供相同的页面但不同的内容，那么媒体查询在我看来并不是一个正确的选择。在手机上，你会强迫用户下载你不打算显示的内容（反之亦然）…对性能不好。您不应该提供您永远不会显示的内容。您最好在运行时通过javascript只提供所需的内容。“我不希望这演变成媒体查询与javascript之间的方法大战。你介意举个小例子吗？@murspieg你引用的建议很好。也就是说，在一个站点上有相同的内容通常是有利的，但可能以不同的方式呈现。（在桌面上，某些东西可能在可见的侧边栏上——在手机上，它可能在可扩展的菜单中）。如果对功能差异有一定的需求（即只在桌面上工作的WebRTC演示），那么这更像是一种服务器端语言（PHP、Ruby、Nodejs）question@VLS/@Katana314将尝试应用可见-隐藏-实用程序；我不知道它们已经在引导中了。我宁愿按照一般的屏幕大小，而不是列出所有的设备。每次新设备上市时，代码都会过时。这方面的例子是什么？#达安太棒了！但我不明白javascript是如何与html交互的。段落内容（在html中的div中）在哪里？jasascript函数如何选择是否显示/传递？我是javascript的新手，你能给我举个例子吗？谢谢你提供的额外细节。我可能不会用这个，但无论如何我都想学习这个方法。我一定把事情搞砸了（告诉你我是新手）。创建移动和桌面HTML；在index.html中，我将函数放在正文的底部。

var宽度

代码在哪里？（我尝试的所有操作都只是将功能代码写入屏幕。）谢谢您的帮助。现在，

var-width

代码去哪里了？（忽略这一点：尝试插入代码）。代码仍然失败；一定是遗漏了一些基本的东西。在mobile.html中：这是mobile（或者这是desktop.html中的desktop）Index.html有：这是Index var width=window.innerWidth。。。示例函数getFileContent（file）{…etc中的etc尝试添加js库（在索引中），没有效果：