Question

我有一个使用备用样式表的网站，并使用iOS4查找iPad。然而，这不是由iPad运行iOS5调用的。我还发现网站http://css-tricks.com/examples/AlternateStyleSheets/在运行iOS4的iPad上工作正常，但在运行iOS5的iPad上却没有，表明这可能是浏览器问题？

我的网站包含以下代码段

<link rel="alternate stylesheet" id="smallScr" title="smallScr" type="text/css" href="/style/smallscreen.style.css" />
<link rel="alternate stylesheet" id="microScr" title="microScr" type="text/css" href="/style/microscreen.style.css" />
.
.
var varDevice = 'iPad';
alert('detected small (ipad) screen device = ' + screen.width + ' x ' + screen.height);
setActiveStyleSheet('smallScr');

在这两种情况下都会调用警报，但我的备用工作表未在运行iOS5的iPad上应用。

有没有人遇到过这个问题并有解决方案

由于

罗布

Answer 1

我有同样的问题。 ios4或任何其他浏览器，交换样式表没有问题，但ios5根本不起作用。它将加载默认样式表，然后当它转换到备用时，没有样式表将处于活动状态。经过一些反复试验后，我得到了以下内容为我工作。效率不高但似乎确实有效。

将$('link[rel*=stylesheet]').each更改为$('link').each，将this.disabled = false更改为$(this).attr( 'disabled', false );似乎有所不同。

<link rel="stylesheet" type="text/css" href="style.css" title="style" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" media="screen" />


var availableStylesheets = [ "style", "style2" ];

function stylesheetSwitch( styleName )
{
$('link').each( function() {
    var inStyles = false;
    for( var i=0; i < availableStylesheets.length; i++){
        if( $(this).attr('title') == availableStylesheets[i] ){
            inStyles = true;
        }
    }
    if(inStyles){
        $(this).attr( 'disabled', true );
        if ($(this).attr('title') == styleName) {
            $(this).attr( 'disabled', false );
        }
    }
}); 
}

Answer 2

有同样的问题，查看规范并找出一个似乎适用于大多数浏览器的解决方案。

在你的html头中包括以下内容：

<meta http-equiv="Default-Style" content="">

然后从Javascript切换到您的某个替代项，您可以使用每个示例：

document.querySelectorAll('meta[http-equiv=Default-Style]')[0].content = 'smallScr';

替代样式表不适用于iOS5

2 个答案: