问题

Question

问题

我在网站顶部使用了一个使用html和js组合构建的轮播。对于网站的移动访问者，我希望省略标记的那一部分，因此图像不必加载，比如对于宽度小于800px的视口。我所做的是在页面底部创建一个脚本，使用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是我最好的选择吗？理想情况下，我只想绕过较小屏幕尺寸的旋转木马，但将所有内容保存在一个页面上，而不是为手机设计单独的页面。

Answer 1

您可以进行媒体查询，如果浏览器宽度低于特定大小，则在轮播上执行display：none。或者类似于下面的东西，你可能不得不修补它。

@media only screen and (max-width: 767px) {
  #myCarousel { display: none; }
}

Answer 2

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

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

Answer 3

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

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

我希望这会有所帮助。

Answer 4

如果页面大于800px，最好插入标记。

例如：

@media screen and（min-width：800px;）

＃ myCarousel {display：block;和所有其他的nessecary styles}

}

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

Answer 5

你有必要做这个客户端吗？将条件放在服务器端可以节省大量的数据传输。用像php或jsp这样的东西来做是微不足道的。

当然，您无法获得服务器端的浏览器详细信息，但是您可以获得用户代理，这可以帮助您完成大部分工作。

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

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

2）假设你没有得到那个用户代理，那么就去Modernizr路线，但是在$（文件）.ready之后不要为轮播加载任何资产 - 此时你应该知道屏幕浏览器的大小和功能 - 当您可以开始加载资产和处理轮播脚本时。

删除网站移动版本的标记部分

问题

轮播的标记

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

问题

5 个答案: