之前一直没机会做移动端的前端，我还特意去看了看，幸亏看了看，机会总是留给有准备的人
今天临时让我改移动端页面，然后那客户杵我后面看着，ohmygod，谁能明白我当时的心情
小心脏瑟瑟缩缩的，还好之前看过点，给他写完了，崩崩崩崩崩崩溃
接下来，重点来了，亲身体会的移动端注意点：
话不多说，上来先把这段代码放到<head>部分
<meta name="viewport" content="width=device-width, initial-scale=1.0">
想了解底部原理请移步前人栽的树下面
http://imweb.io/topic/56b421c15c49f9d377ed8eef
http://hcysun.me/2015/10/16/%E4%B8%80%E7%AF%87%E7%9C%9F%E6%AD%A3%E6%95%99%E4%BC%9A%E4%BD%A0%E5%BC%80%E5%8F%91%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%96%87%E7%AB%A0(%E4%B8%80)/
下面安利一个移动端轮播图的简单实现方法
1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css"> </head> <body> ... <script src="path/to/swiper.min.js"></script> </body> </html>
2.HTML内容。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div> </div> 导航等组件可以放在container之外
3.你可能想要给Swiper定义一个大小，当然不要也行。
.swiper-container {
600px;
height: 300px;
}
4.初始化Swiper：最好是挨着</body>标签
<script> var mySwiper = new Swiper ('.swiper-container', {
//上下 direction: 'vertical',
//是否循环 loop: true, // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 scrollbar: { el: '.swiper-scrollbar', }, }) </script>
如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化（不推荐）。
<script type="text/javascript"> window.onload = function() { ... } </script>
或者这样（Jquery和Zepto）
<script type="text/javascript"> $(document).ready(function () { ... }) </script>
5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。
如果有些功能不需要，请注释掉相关代码，然后就可以继续愉快的敲代码了
en。。。轮播图所用插件是这个
http://www.swiper.com.cn/usage/index.html