防止在移動設備上加載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文檔

回答

相關問題