モバイルでjQueryを実行しています

Question

私のサイトには1つのスライドボックスがあり、残念なことにdisplay: noneの多いモバイルスタイルシートを含めるためにメディアクエリを使用しています。私がそれをサイトのかなり重要な部分（最新のトップコンテンツなどを表示している）にすることを決めたら、スライドボックスはdisplay:noneの1つでした。

とにかく、タブを使用して各スライド間をジャンプし、タブ内ではコンテンツのタイトルです。 'Big Event'や 'Sign Up Here'などモバイルデバイスではこれが長すぎるので、スクリーンに基づいてテキストを1、2、3、4などに変更するためにいくつかのjQueryを使いました幅、それは多くの部屋を節約します。

<!-- This is only for the mobile site --> 
<script> 
$(document).ready(function() { 
if ($(window).width() < 500) { 
    $('#newsTabsControl li:nth-child(1) a').text('1'); 
    $('#newsTabsControl li:nth-child(2) a').text('2'); 
    $('#newsTabsControl li:nth-child(3) a').text('3'); 
    $('#newsTabsControl li:nth-child(4) a').text('4'); 
    $('#newsTabsControl li:nth-child(5) a').text('5'); 
} 
}); 
</script> 

これは私がそれを行うと考えた唯一の方法です。私の携帯端末（iPhone）で見ると、ほとんどの場合動作しますが、まったく動作しないことがあります - 少し矛盾します。

これを簡単にするためのアイデアはありますか？

Answer 1

これにはCSS Media Queriesを使用できます。

詳しい情報はここで見ることができます：

HTML

<div class="desktop-menu"><!-- HTML FOR DESKTOP --></div> 

<div class="mobile-menu"><!-- HTML FOR MOBILE --></div> 

CSS

： http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

私はこのような心の何かに持っていました

.mobile-menu {display:none} 

@media only screen and (max-width: 500px) { 

.desktop-menu {display:none} 
.mobile-menu {display:inline} 

}