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

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

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

这里是为了在移动设备上加载的不想要的东西我一个例子：

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

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

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

来源

2015-07-21 Olen

你知道设备是否是移动的或不是在页面被PHP渲染的时间点吗？ –

我没有添加特定的检测器，用于远离已添加的UserAgent的移动设备。你可以看看这里：http://codeviewer.org/view/code:5389 – Olen

由于你已经有了基于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?

来源

2015-07-21 19:25:09

非常感谢。对不起，没有发布，我不认为他们可以合并。这解决了这个问题。 – Olen

http://mobiledetect.net/这可以是一个不错的选择，只能把

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

来源

2015-07-21 19:04:44 Jjsg08

-2

您可以使用所有的CSS媒体查询，以确定何时使用CSS，什么时候不

例子： @media (max-width:600px)

来源

2015-07-21 19:06:14

这样一个简单的媒体查询可能在今天这个时代没有用，很多移动设备（包括手机）的桌面分辨率都比较高/手提电脑屏幕。此外，这并没有解决OP关心的问题，即他希望尽量减少移动设备上的CSS下载大小，因为您可以同时下载移动网站和完整网站CSS。 –

选项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/

来源

2015-07-21 19:06:36

您可以使用媒体属性附加伤害基于视窗的大小有选择地加载CSS文件使用媒体查询和@import ...

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

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

来源

2015-07-21 19:10:02 user4651781

您可能需要结合使用浏览器宽度和像素密度才能做出此决定，因为许多智能手机现在的分辨率都高于台式机/笔记本电脑。 –

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

回答

相关问题