根据屏幕大小更改 jQuery答案

【问题标题】：Changing jQuery based on screensize根据屏幕大小更改 jQuery
【发布时间】：2012-12-10 21:57:06
【问题描述】：

我目前正在使用一个小插件 (jTruncate)，它会在超过某个字母阈值时截断文本 - 我想知道，我可以将该字母阈值与屏幕尺寸联系起来吗？

例如

如果屏幕尺寸低于如果屏幕尺寸低于

$().ready(function() {  
    $('#recent').jTruncate
    ({  
        length: 45,
        moreText: [""],
    });
});

【问题讨论】：

标签： jquery screen responsive-design truncate

【解决方案1】：

作为 Javascript 的替代方案，您可以使用 CSS 媒体查询并将最后 15 个字符包装在一个跨度中，该跨度隐藏在较小的分辨率中。

【讨论】：

这似乎是一种令人难以置信的“hacky”做事方式，遗憾的是，我认为这不合适（尽管有点巧妙），因为被截断的内容将保持活力 - 不过感谢您的建议 :)
@Ollie 不，这实际上是更好的方法。 CSS 渲染将比 JS 可以做的任何事情都快很多（有争议的点），并且媒体查询对于这种类型的操作非常有利。也让它“动态”没有区别，因为 CSS 将应用于容器而不是内容。
我完全收回我当时说的话！如果你没有注意到，我是新手——而且我已经在吐垃圾了:) 很抱歉——非常感谢你的帮助，我会看看我是否可以通过媒体查询来做到这一点

【解决方案2】：

http://jsfiddle.net/EwNxR/8/ 这里是一个带有 js 的演示。不过，我确实建议使用 Jimbo 在他的回答中指出的媒体查询。

代码中需要注意的重要事项：
1）您可能希望收听页面大小调整和操作。在页面加载时运行代码一次，然后在用户调整浏览器窗口大小时运行代码是没有意义的。
2) 如果 IE6 不是问题，你不应该使用 jQuery $(window).height()。使用 window.innerHeight。

window.onresize = resizer;
function resizer() {
    if (window.innerWidth < 960) {
        $('#recent').jTruncate({
            length: 45,
            moreText: [""],
        });
    }
}

我不是 100% 熟悉该插件，但是如果选项的结构类似于 jQuery 插件，那么您应该能够在页面加载时对其进行初始化，然后只需更改长度值。

var recent = $('#recent'),
    defaultLength = 256; // default, can be whatever.
window.onresize = resizer;
recent.jTruncate({ length: defaultLength, moreText: [""] });
function resizer() {
    if (window.innerWidth < 960) {
        recent.jTruncate("length", 45); // don't re-init the plugin, just change the option.
    } else {
        recent.jTruncate("length", defaultLength); // page resized and truncating is no longer needed to be shorter.
    }
}

【讨论】：

遗憾的是，那些小 sn-ps 对我不起作用，不过谢谢你的尝试——该死的视力比我能做的还要好。无论如何你可以写一个css包装/隐藏的例子吗？我在上面找不到任何东西（虽然，公平地说，我很可能在完全错误的地方寻找）jsfiddle.net/zvHwq/3
@Ollie 最后那句小小的谢谢很烦人。对不起。 here 是一个非常短非常有限的纯 css 示例。注意：您应该为此使用 css 和 javascript 的组合。 javascript主要是在点击more时对元素应用css类规则，点击less时删除类。

【解决方案3】：

只需使用window。

var win_width = $(window).width();
var win_height = $(window).height();

【讨论】：