0

问题

我在网站顶部使用了一个旋转木马，它使用 html 和 js 的组合构建。对于网站的移动访问者，我希望省略该部分标记，以便不必加载图像，例如对于小于 800 像素宽的视口。我所做的是在页面底部创建了一个脚本，该脚本使用 jquery 获取浏览器宽度，如果宽度足够大，则使用 .prepend() 将轮播的整个标记放置在我的 body 元素的顶部. 显然，这个解决方案是有效的，但看起来并不漂亮，尤其是在轮播标记需要更改的情况下。

轮播的标记

<div class="row">
<div class="span12 columns">
<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="active item">
      <img src="img/1.jpg">
      <div class="carousel-caption"><h4>Hello</h4></div>
    </div>
    <div class="item">
      <img src="img/2.jpg">
      <div class="carousel-caption"><h4>World</h4></div>
    </div>
  </div><!-- Carousel inner-->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">prev</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">next</a>
</div>  <!--Carousel outer-->
</div><!--span-->
</div><!--row-->

javascript然后看起来像......

if (windowWidth >= 800) {
    $('.content').prepend('...all the markup for the carousel no spaces or returns...');
}

问题

这充其量只能是一个粗略的解决方案，有没有人知道这种事情的好做法？js/jquery 是我最好的选择吗？理想情况下，我只想绕过较低屏幕尺寸的轮播，但将所有内容保留在一个页面上，而不是为手机设计一个单独的页面。

4

5 回答 5

1

您可以进行媒体查询，如果浏览器宽度低于某个大小，则在轮播中显示：无。或者类似于下面的内容，您可能需要修改它。

@media only screen and (max-width: 767px) {
  #myCarousel { display: none; }
}
于 2012-05-31T19:41:55.297 回答
0

通过检查屏幕宽度属性并相应地运行代码，您可以在页面加载后将轮播的 HTML 附加到 DOM （而不是隐藏/删除它）。

您可以将其作为来自 JavaScript 的字符串注入，或者通过选择性地通过 AJAX 加载它来使其对移动用户更加轻量。

于 2012-05-31T19:45:09.510 回答
0

看看这些脚本；他们无需测试屏幕尺寸即可检测移动浏览器。您可以根据结果重定向到没有轮播的不同版本，或者您也可以使用名为modernizr的 JS 插件来测试触摸事件并仅在它们存在时加载轮播：

if (Modernizr.touch){
   // Load Carousel
} else {
   // Hide Carousel or Load Alternative Content
}

我希望这有帮助。

于 2012-05-31T19:46:56.280 回答
0

您是否有理由必须在客户端执行此操作？将条件放在服务器端将节省大量数据传输。用 php 或 jsp 之类的东西做起来是微不足道的。

当然，您无法在服务器端获取浏览器详细信息，但您可以获得用户代理，它可以让您大部分时间到达那里。

所以我要做的是结合上述建议 -

1) 从服务器端检查开始。如果您获得了适用于 iOS/Android/Blackberry/其他随机移动平台的用户代理，请完全绕过轮播标记。

2）假设你没有得到那个用户代理，然后走 Modernizr 路线，但在 $(document).ready 之后才为轮播加载任何资产 - 那时你应该知道屏幕尺寸和浏览器的功能——此时您可以开始加载资产和处理轮播脚本。

于 2012-05-31T23:13:00.323 回答
0

最好是在页面大于 800px 时插入标记。

例如：

@media screen and (min-width: 800px;)

# myCarousel{显示：块；和所有其他 nessecary 风格}

}

然后，如果需要，您可以像使用 jQuery 一样添加标记。

于 2012-05-31T19:56:22.420 回答