代替のスタイルシートが動作しないiOS5

Question

代替スタイルシートを使用し、iOS4を使用してiPadsで検索したWebサイトがあります。しかし、これは、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'); 

を持っていますが、私の代わりのシートは、iPadで動作してiOS5を上適用されません。

は、誰もがこの問題に遭遇し、解決策を持っている持ってい

おかげ

はロブ

Answer 1

は、スペックを見て、ほとんどのブラウザで動作するように思わソリューションを考え出し、同じ問題を持っていました。あなたのhtml頭で

は、次のものがあります

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

次にあなたが例ごとに使用することができますJavaScriptからあなたの交互のいずれかに切り替えるために：

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

Answer 2

私は同じ問題がありました。 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); 
     } 
    } 
}); 
}