javascript - 如果在移动设备上运行 jQuery

Question

我的网站上有一个 slidebox per sae，不幸的是，我们使用媒体查询来包含一个移动样式表，该样式表执行大量 display: none。幻灯片框是这些 display:none 之一，直到我们认为它是网站的重要组成部分(显示最新的热门内容等)，所以我决定将其重新添加。

总之，长话短说，它使用标签在每张幻灯片之间跳转，标签内是内容的标题，即。 '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) 上查看它时，它大部分时间都可以工作，但有时根本不工作 - 有点不一致。

关于如何使这更容易的任何想法？

Answer 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}

}