我的 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>
最佳答案
1.这是最佳实践吗?
取决于您认为什么是最佳实践,也取决于您的应用程序和公司的上下文中的最佳实践。这让我想到的一件事是:你能保证你所有的页面都将使用 jQuery 吗?如果是这样,那么我认为这是实现您所追求的目标的好方法。另一种方法是在服务器端执行此操作,这将保证最佳性能,但可能有其他原因导致您不想这样做(也许您无权访问服务器端代码,或者您想维护大部分前端程序员手中的功能)。
2.性能好吗?
简短的回答是否定的。除了需要 100K+ 的 jQuery 有效负载之外,还要在页面上注入(inject) CSS。您目前解决问题的方法是等待整个页面(和所有依赖项)加载,然后再向其添加样式。这将在页面最初显示(没有样式)和加载样式以及所有内容移动之间产生明显的“跳跃”。
加载 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>
为了进一步提高性能,您可以使用不依赖于 jQuery 的解决方案,而不是
$(".cssLink").attr("href", controlCss);
您可以添加 #cssLink
到样式表 <link>
元素并使用 DOM 执行相同的操作:
document.getElementById("cssLink").setAttribute("href", controlCss);
这将使您的代码如下所示:
<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>
这样,在将样式表应用到页面之前,您将消除对 100K 以上的 jQuery 负载的依赖。
更新:
也可以根据屏幕尺寸而不是设备应用 CSS 规则。
你看过@media queries了吗? ?
关于javascript - 检测设备并交换 CSS 文件 - jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7954196/