Question

我正在努力使网站响应。目前，该网站必须有两个横幅 - 一个用于桌面，一个用于移动网站。

我已经掌握了媒体查询等所有内容。但是我现在已经注意到desktop banner javascript file中的某些内容导致mobile banner javascript无法正常运行。

所以我想我只能在屏幕超过一定大小的情况下才尝试加载desktop banner js file，假设是1000px。

我不确定这是否可能，以及如何？或者是否有其他方法可以在显示移动横幅时取消desktop js file？

任何建议都表示赞赏！

Answer 1

如果您尝试加载JavaScript file，则可以使用navigator.userAgent检测用户代理，并为移动设备和其他用户加载不同的脚本：

function isMobile() {
  return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
}


function loadScript(url) {
  var head = document.getElementsByTagName("head")[0];
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  head.appendChild(script);
}

if (isMobile()) {
  loadScript("MOBILE-script.js");
  console.log("mobile script");
} else {
  loadScript("DESKTOP-script.js");
  console.log("desktop script");
}

Answer 2

if (window.innerWidth < 1000) {
   ... mobile banner code
} else {
   ... desktop banner code
}

如果用户调整窗口大小，您就可以自己：）

Answer 3

您可以在Javascript中使用SELECT TABLE_NAME FROM dba_tables WHERE num_rows = 130 -- num_rows = 130 can be replaced with any requirement you have

screen.width

这只会加载两个文件中的一个，具体取决于屏幕大小。

Answer 4

可以使用

检索屏幕尺寸

screen.availWidth // 1920
screen.availHeight // 1112

Answer 5

您可以根据窗口大小设置标记，您需要的所有维度信息都在上面的代码段中。

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

请记住，您可能需要在resize事件处理程序上绑定脚本加载。我强烈建议使用debouncing管道功能，以便更有效地处理调整大小。

之后，您可以使用以下实用程序函数加载脚本：

function loadScript(url, callback) {
  // Adding the script tag to the head as suggested before
  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;

  // Then bind the event to the callback function.
  // There are several events for cross browser compatibility.
  script.onreadystatechange = callback;
  script.onload = callback;

  // Fire the loading
  head.appendChild(script);
}

if (x > 1000) {
  //desktop
  loadScript("desktop.js", myPrettyCode);
} else {
  //mobile tablet
    loadScript("mobile.js", myPrettyCode);
}

请记住，像Modernizr这样的实用程序库有一些有用的功能检测助手，可以帮助您。 David Walsh还provided a quite smart way检测屏幕尺寸。此外，卸载脚本非常苛刻here is相关的StackOverflow问题

您还可以查看此question，因为它可能会有所帮助，并且可以查看require.js，它是一个高效的JavaScript文件和模块加载程序。

仅根据屏幕大小加载javascript文件

5 个答案: