屏幕宽度小于指定尺寸时发出警报答案

【问题标题】：alert if screen width is less then a specified size屏幕宽度小于指定尺寸时发出警报
【发布时间】：2019-12-17 12:21:50
【问题描述】：

我有一个 Ruby on Rails v6 应用程序。

如果屏幕宽度小于 1000 像素，我需要实现的是在连接到应用程序时向用户发送警报。

我找到了几个建议，我最喜欢的是

$(window).onload(function() {
  var width = $(window).width();
  if (width < 1000){
    alert('Your screen is too small');
  }
});

唯一的问题是我不知道放在哪里：

我的应用程序控制器调用application.html.haml 页面而不是application.js.erb 页面，那么，我可以将那个代码片段放在哪里？

【问题讨论】：

您的application.html 应该包含您的application.js 文件。只需确保在 application.js 中仅放置每个页面上需要的 JavaScript，以缩短页面加载时间。
Scott，你能给我一个关于如何在 application.html 中包含 application.js 和 application.js 内容的示例吗？谢谢
我在回答中提供的链接包含所有这些内容。如果不清楚，并且您希望获得有关项目的具体指导，请将您的 application.js 和 application.html 代码 sn-ps 添加到您的问题中，我可以评论可能缺少的内容。

标签： jquery ruby-on-rails ruby-on-rails-6

【解决方案1】：

好吧，我解决了这个问题。我刚刚将$(window).onload 更改为$(document).ready，警报神奇地出现了！

谢谢大家。

【讨论】：

祝保罗好运

【解决方案2】：

您可以使用 :javascript 过滤器内联添加 javascript 代码：

下面的代码应该放在你的 jQuery 包含标签之后。我建议把它放在身体的末端。

:javascript
    $(window).onload(function () {
        var width = $(window).width();
        if (width < 1000) {
            alert('Your screen is too small');
        }
    });

【讨论】：

我把它放在了代码的末尾（准确的说是在正文的末尾），但是当我启动应用程序时它没有被触发

【解决方案3】：

最好尽可能避免使用内联 JS，因为这样做意味着您没有利用 Webpack 的优势。

如果此代码没有在任何地方使用，而仅在特定页面上使用，我将创建一个新包（在 app/javascript/packs 中），并将其包含在需要使用 javascript_pack_tag 帮助器的页面中。

如果在每个页面上都使用它，那么只需创建新包，然后在app/javascript/packs/application.js 中使用它。

以下是演示这两种方法的文章的链接：https://dev.to/morinoko/adding-custom-javascript-in-rails-6-1ke6

【讨论】：