如何按浏览器宽度提供不同的 javascript 文件答案

【问题标题】：How to serve up different javascript files by browser width如何按浏览器宽度提供不同的 javascript 文件
【发布时间】：2011-06-16 05:22:02
【问题描述】：

所以我想要特定浏览器宽度的特定 Javascript 文件。我知道@media 为每个浏览器宽度和某些设备提供特定的 CSS。在不使用服务器端调用的情况下，我将如何对 Javascript 文件执行类似操作？

是否可以使用 Javascript 根据浏览器宽度调用其他 Javascript 文件？如果有，怎么做？

提前致谢。

【问题讨论】：

为什么需要不同的javascript文件？如果用户调整窗口大小会发生什么？
我知道这样的事情使用媒体查询会很棒。移动样式表中不再存在许多需要 js 的元素。如果浏览器低于某个宽度，我个人希望完全停止 js 加载。

标签： javascript browser width

【解决方案1】：

var scriptSrc = 'js/defaults.js';
if (screen.width <= 800)
  scriptSrc = 'js/defaults-800.js';
else if (screen.width <= 1024)
  scriptSrc = 'js/defaults-1024.js';
var script = document.createElement('script');
script.src = scriptSrc;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);

也许？根据屏幕分辨率动态加载它们。也可以使用文档大小、浏览器大小等。虽然我不肯定你真的想要这样做。 理想情况下，您应该在设计中处理相关指标（如 % 或 em）并避免这种情况。

【讨论】：

II 尝试了与 jQuery 类似的方法，方法是将 id 设置为默认脚本标记，然后根据该标记切换文件。我可以按照您的方式尝试，在 Firebug 中，尝试加载文件的页面出现错误。所有路径都是正确的，但我可能只是以这种方式附加它。
你认为我也可以用它来省略某些文件吗？
@Carlos：是的，你可以。关键是在加载过程中需要避免它们，直到您需要/想要它们。如果不进行一些认真的重新声明，就无法卸载您已经加载的文件。如果你想变得花哨，你可以让脚本基于相对大小运行，制作多个版本但将其绑定到一个公共访问器，或者只是继续这条路径并加载适用的内容。

【解决方案2】：

虽然我不确定为什么，但您始终可以通过 JS Script 导入 JavaScript 文件。

以下链接提供了一些相关信息。

附带说明 - 您为什么要这样做？当然，您可以获得屏幕的分辨率，然后根据这些变量调整计算/内容，而无需更改 JS 文件。有很多不同的分辨率（移动设备、多台显示器、宽屏幕、投影仪等）。用户还可以有效地重新调整浏览器的大小，这不值得。

【讨论】：

我看这个主要是为了切换移动窗口大小的手风琴菜单和我们桌面浏览器大小的淡入菜单。
@Carlos：我想我现在不知道有哪个网站使用他们的桌面页面作为移动设备。我会为自己省去头疼的问题，并关注浏览器转发并更多地担心网站本身。此外，除非您有一个非常简单的网站，否则您很可能希望为移动设备简化它（剪切媒体、多余的图形等）

【解决方案3】：

试试这个：

var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")

if (window.document.body.clientWidth == XXX) {
    fileref.setAttribute("src", "script1.js")
} else {
    fileref.setAttribute("src", "script2.js")

}

【讨论】：

【解决方案4】：

媒体查询是一个很好的解决方案，可以为不同的窗口宽度提供替代样式。不幸的是，<script> 元素没有media 属性可以进行类似的处理。

但是，您可以提供一个脚本加载脚本，该脚本将加载所需的.js 文件，具体取决于浏览器根据您的媒体查询选择的样式表。我不知道如何以直接、优雅的方式做到这一点，但有一个很好的技巧。您必须使用唯一声明（虚拟、不重要或设计不同）“标记”每个 .css，并在页面加载后从 JS 中检查它以确定浏览器应用了哪个样式表。

HTML 可能如下所示：

<style media="handheld, screen and (max-width:1023px)">
    body { margin-top: 0px }
</style>
<style media="screen and (min-width:1024px)">
    body { margin-top: 1px }
</style>

以及随附的JS如下：

function onLoad() {
    var head = document.getElementsByTagName('head')[0];
    var body = document.getElementsByTagName('body')[0];
    var mark = window.getComputedStyle(body).getPropertyValue('margin-top');

    var script = document.createElement('script');
    script.setAttribute('src', mark=='0px' ? 'handheld.js' : 'screen.js');
    head.appendChild(script);
}

这可以完成这项工作，但仅限于每个负载。为了让用户对调整浏览器窗口的大小做出响应，您应该跟踪寡妇的宽度并在必要时重新加载页面。

【讨论】：

【解决方案5】：

自 2011 年以来，世界已进入移动时代。

您可能想尝试：document.documentElement.clientWidth，因为它会告诉您页面的可见区域 - 它对缩放有反应，但对俯仰没有反应。

【讨论】：