在搜索 SO 和网络之后,我对任何解决方案都不满意。所以我想出了一个新的解决方案,它适用于旧 ipad 上的 chrome、ff、ie 和 safari 和 safari:
第一组款式:
<link rel="stylesheet" href="./codebase/touchui.css" data-title="default" type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet" href="./codebase/ios.css" data-title="ios" type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet" href="./codebase/jq.css" data-title="jq" type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet" href="./codebase/sky.css" data-title="sky" type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet" href="./codebase/green.css" data-title="green" type="text/css" media="screen" charset="utf-8">
注意属性“data-title”这是一个用户定义的属性。
然后用这个函数来改变样式表,(注意我是在app范围内设置的,你可以把它设为标准函数:
app = {}
app.styleSet=function(title) {
var i, a
var o;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++)
if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute('data-title') ) {
if (a.getAttribute('data-title') == title)
o = a
a.setAttribute("rel", "alternate stylesheet");
a.setAttribute("title", a.getAttribute('data-title'));
a.disabled = true
}
o.setAttribute("title", undefined);
o.setAttribute("rel", "stylesheet");
o.disabled = false
//app.cookieCreate("style", title, 365);
}