确定哪个 css 加载了 jQuery

Question

我有加载不同 css 的 html 页面，具体取决于屏幕宽度（针对 pc、平板电脑和手机）：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" >
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1200px)" href="css/desktop-style.css" > 
<link rel="stylesheet" type="text/css" media="screen and (min-width: 769px) and (max-width: 1199px)" href="css/tablet-style.css" >
<link rel="stylesheet" type="text/css" media="screen and (min-width: 100px) and (max-width: 768px)" href="css/phone-style.css" >

我非常依赖 jQuery，应该根据活动的 css 来选择函数。 在 jQuery 的 JavaScript 中有没有办法确定哪个 css 处于活动状态？ 或者我应该使用 jQuery 来确定浏览器宽度，并根据宽度输出进行更多功能？ 谢谢。

Answer 1

您可以检查this 线程是否有帮助。

您还可以考虑在 css 文件中使用媒体查询，并为不同的屏幕变体加载相同的文件。

Answer 2

我建议您使用media query，但如果您想要JavaScript 解决方案，可以使用jQuery 执行此操作，如下所示：

var window = $(window).width();
var css = $('#css');

if(window > 100 && window < 768){
  css.attr('href','css/desktop-style.css')
} else if(window > 769 && window < 1199){
  css.attr('href','css/tablet-style.css')
} else if(window > 1200){
  css.attr('href','css/phone-style.css')
}

<link id="css" rel="stylesheet" type="text/css" href="css/style.css" >

注意：您可以根据需要更改分辨率，我不确定检测 mobile tablet 等是否正确。

警告： 注意！这种方法对SEO 的东西有点不好，google 等不会读取你的响应样式。

Answer 3

检查设备的宽度可能更明智。但是我认为您可以通过这个小“黑客”找出使用了哪个 css。在每个 css 中，你给隐藏元素一个无意义的属性。

在示例中，我为 #canary 指定了动画名称 first-css。

你可以在不同的css文件中写

#canary {animation-name: second-css; display: none}

您可以为每个 css 文件中的特定元素赋予唯一属性。 JQuery 可以检查该属性。

$(function() {
whichcss=$("#canary").css("animation-name");
$("#output").text(whichcss);
})

#canary {animation-name: first-css; display: none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="canary"></p>
<p id="output"></p>

要特别清楚。在您的 css 文件中，您应该以这种方式包含 css 文件的名称：

在 desktop-style.css 中：

#canary {animation-name: desktop-css; display: none} 

在 tablet-style.css 中：

#canary {animation-name: tablet-css; display: none}  

在 phone-style.css 中：

#canary {animation-name: phone-css; display: none}