Question

尝试提高移动设备的加载速度，并且至少有一个我不想在移动设备上加载的CSS文档。

我已经阻止了加载脚本，但CSS文档有点不同。

以下是我不想在移动设备上加载的示例：

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/animations.css">

你有一个可行的解决方案吗？

不确定哪些标签最正确，因为这可能是由文档开头的CSS或jQuery或HTML完成的。

Answer 1

选项1：使用PHP检查用户代理字符串并将其与已知的移动浏览器进行比较。 http://php.net/manual/en/function.get-browser.php

选项2：使用Javascript检查用户代理字符串和/或窗口宽度/高度，并在签出时添加CSS。

选项3：如果目标设备签出https://css-tricks.com/snippets/css/media-queries-for-standard-devices/，则使用媒体查询和@import

Answer 2

由于你已经有基于javascript的移动检测（你应该在OP中注意到这一点，因为它非常重要），你可以使用javascript来加载CSS。你可以做一些简单的事情：

<script>
if(!isMobile.any()) {
    document.write('<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/animations.css">');
}
</script>

这是一种非常简单的方法。使用DOM操作来插入此链接实际上可能更好。查看此SO答案，了解有关如何做到这一点的更多想法 - How to load up CSS files using Javascript?

Answer 3

http://mobiledetect.net/这对你来说是个不错的选择，只需要

<?php if($detect->is("Crhome")){ ?><link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/animations.css"><?php } ?>

Answer 4

您可以使用媒体属性来根据视口大小选择加载CSS文件...

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/animations.css" media='screen and (min-width: 800px)'>

虽然这取决于你所说的“移动设备”

Answer 5

您可以对所有css使用媒体查询来确定何时使用css以及何时不使用

实施例： import re x="fun(1, bar(x+17, 1), arr = 's,y')" print re.split(r",\s*(?![^$]*$)(?![^']*'(?:[^']*'[^']*')*[^']*$)",re.findall(r"^.*?$(.*)$",x)[0])

防止在移动设备上加载CSS文档

5 个答案: