0

私のサイトにはスライドボックスがあり、メディアクエリを使用してdisplay: none、残念ながら多くのことを行うモバイルスタイルシートを含めています。スライドボックスはdisplay:none、サイトの非常に重要な部分 (最新のトップ コンテンツの表示など) であると判断するまではその 1 つだったので、再度追加することにしました。

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

<!-- 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) で見ると、ほとんどの場合は機能しますが、まったく機能しない場合もあります。少し一貫性がありません。

これを簡単にする方法についてのアイデアはありますか?

4

1 に答える 1

1

これには、CSS メディア クエリを使用できます。

詳細については、http ://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries をご覧ください。

私は次のようなことを念頭に置いていました：

HTML

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

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

CSS

.mobile-menu  {display:none}

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

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

}
于 2012-04-19T15:00:28.170 に答える