javascript 检测设备并交换 CSS 文件 - jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7954196/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect device and swap the CSS file - jQuery
提问by Sameera Thilakasiri
My web application target to major Smartphones and I need to change the CSS file according to device (if there are issues in the UI need to hit them), and I'm planning swap CSS using following jQuery. Just want to know whether is it a best practice and good in performance?
我的 web 应用程序针对主要智能手机，我需要根据设备更改 CSS 文件（如果 UI 中存在问题需要点击它们），我计划使用以下 jQuery 交换 CSS。只想知道它是否是最佳实践并且性能良好？
<link rel="stylesheet" href="basic.css" type="text/css" class="cssLink" />
<link rel="stylesheet" href="general.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
// css file based on the device
var controlCss;
// get the device agent and conver to lover case
var deviceAgent = navigator.userAgent.toLowerCase();
if(deviceAgent.match(/android/i)){
controlCss = "android.css";
$(".cssLink").attr("href", controlCss);
}
else if(deviceAgent.match(/webso/i)){
controlCss = "webOS.css";
$(".cssLink").attr("href", controlCss);
}
else if(deviceAgent.match(/iphone/i)){
controlCss = "iphone.css";
$(".cssLink").attr("href", controlCss);
}
else if(deviceAgent.match(/ipod/i)){
controlCss = "ipad.css";
$(".cssLink").attr("href", controlCss);
}
else if(deviceAgent.match(/blackberry/i)){
controlCss = "bb.css";
$(".cssLink").attr("href", controlCss);
}
else {
controlCss = "basic.css";
$(".cssLink").attr("href", controlCss);
}
});
</script>
回答by Steven de Salas
1.Is it best practice?
1.这是最佳实践吗？
Depends on what you think of as best practice, also what best practice is in the context of your application and your company. One thing this makes me think about is: Can you guarantee all your pages will be using jQuery? If so then I think this is a good approach to achieve what you are after. An alternative would be to do this server-side, that would guarantee best-performance but there may be other reasons why you dont want to do this (maybe you dont have access to server-side code, or you want to maintain most of the functionality in the hands of front-end programmers).
取决于您认为的最佳实践，以及您的应用程序和公司上下文中的最佳实践。这让我想到的一件事是：你能保证你的所有页面都使用 jQuery 吗？如果是这样，那么我认为这是实现您所追求的目标的好方法。另一种方法是在服务器端执行此操作，这将保证最佳性能，但可能还有其他原因您不想这样做（也许您无权访问服务器端代码，或者您想维护大部分前端程序员手中的功能）。
2.Is it good in performance?
2.性能好吗？
The short answer is no. On top of needing the 100K+ payload of jQuery to inject the CSS on the page. The way you've approached the problem at the moment is to wait for the whole page (and all dependencies) to load before adding styles to it. This will create a noticeable 'jump' between when the page gets displayed at first (without styles) and when the styles get loaded and everything moves around.
最简洁的答案是不。除了需要 100K+ 的 jQuery 负载之外，还需要在页面上注入 CSS。您目前解决问题的方法是等待整个页面（和所有依赖项）加载，然后再向其添加样式。这将在最初显示页面（没有样式）和加载样式并且所有内容移动时之间产生明显的“跳跃”。
Loading the CSS server-side will get rid of this, but I think you can still do this in the UI and keep the majority of your code-base in JavaScript which will make it easier to maintain. In order to do this, remove the bit where you wait for the document to be loaded before calling up your CSS file:
加载 CSS 服务器端将摆脱这一点，但我认为您仍然可以在 UI 中执行此操作，并将大部分代码库保留在 JavaScript 中，这将使其更易于维护。为此，请删除在调用 CSS 文件之前等待文档加载的位：
<link rel="stylesheet" href="basic.css" type="text/css" class="cssLink" />
<link rel="stylesheet" href="general.css" type="text/css" />
<script type="text/javascript">
// No need to wait for document to load
// $(document).ready(function() {
// css file based on the device
var controlCss;
// get the device agent and conver to lover case
var deviceAgent = navigator.userAgent.toLowerCase();
if(deviceAgent.match(/android/i)){
controlCss = "android.css";
$(".cssLink").attr("href", controlCss);
}
// etc..
// });
</script>
To further improve performance you could use a solution that does not depend on jQuery, instead of
为了进一步提高性能，您可以使用不依赖于 jQuery 的解决方案，而不是
$(".cssLink").attr("href", controlCss);
you could add #cssLinkto the stylesheet <link>element and use the DOM to do the same:
您可以添加#cssLink到样式表<link>元素并使用 DOM 来执行相同的操作：
document.getElementById("cssLink").setAttribute("href", controlCss);
This would make you code look as follows:
这将使您的代码如下所示：
<link rel="stylesheet" href="basic.css" type="text/css" css="cssLink" id="cssLink" />
<link rel="stylesheet" href="general.css" type="text/css" />
<script type="text/javascript">
// .. blah blah ..
if(deviceAgent.match(/android/i)){
controlCss = "android.css";
// use a solution that does not need jQuery
document.getElementById("cssLink").setAttribute("href", controlCss);
}
// etc..
</script>
This way you will remove the dependency on the 100K plus payload of jQuery before you can apply your stylesheets to the page.
这样，在将样式表应用到页面之前，您将消除对 100K 加上 jQuery 有效负载的依赖。
UPDATE:
更新：
It is also possible to apply CSS rules based on screen size rather than device.
也可以根据屏幕尺寸而不是设备来应用 CSS 规则。
Have you had a look at @media queries?
你有没有看过@media 查询？
