jQuery只能在移动CSS加载时运行？

Question

我使用媒体查询（例如

）加载仅限移动设备的CSS

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="/includes/css/mobile.css" />

但除了这些CSS更改之外，我还需要重新排序部分HTML，例如

$('#moveOne').after($('#theOther');

如果浏览器确实加载了mobile.css，我只想要采取行动。所以我想在mobile.css中添加一些奇怪的CSS值，然后像这样检查它的值

if($'#notVisible').css('color') == 'red') {
    $('#moveOne').after($('#theOther');
}

有更好的方法吗？

Answer 1

您始终可以使用与媒体查询相同的逻辑

if (document.documentElement.clientWidth <= 480) {
    $('#moveOne').after($('#theOther');
}

Answer 2

我认为，你所做的事情绝对是好的。

但更合乎逻辑的方法是设置width而不是color。

if($'#notVisible').width() == '500px') {
    $('#moveOne').after($('#theOther');
}

此外，您可以尝试matchMedia.js

也可以在Using_media_queries_from_code查看。