移动端模板

======>head

<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="screen-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-orientation" content="portrait">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="x5-fullscreen" content="true">
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="description" content="">
<meta name="keywords" content="">
<title>moveUMIS</title>
<link rel="stylesheet" href="../css/move/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/move/umis.css"/>
<link rel="stylesheet" href="../css/move/swiper-3.3.1.min.css" />
<script>
      var pixelRatio = 1/window.devicePixelRatio;
     document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixelRatio+',minimum-scale='+pixelRatio+',maximum-scale='+pixelRatio+',user-scalable=no" />');
        function  resize(){
            var html=document.getElementsByTagName('html')[0];
            var  pageWidth=html.getBoundingClientRect().width;
            html.style.fontSize=pageWidth / 16+'px';
        }
        resize();
         window.addEventListener("resize", resize,false);
</script>
=====>reset

@charset "utf-8";
/*Reset pc*/
body, h1, h2, h3, h4, h5, h6, p, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { border: none; vertical-align: top; }
a { text-decoration: none; }
body { font-family: helvetica;/*英文字体*/ }

/*Reset mobile */
body * {
    -webkit-text-size-adjust: 100%;  /*禁止用户修改字体大小，部分横竖屏切换字体大小缩放*/
    -webkit-user-select: none;/*禁止选中文字，安卓部分机型没效果,弹出菜单js*/
    }
a, input, button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);/*清除点击阴影*/
    }
input, button {
    -webkit-appearance: none;  /*清除ios按钮圆角*/
    border-radius: 0;
     }
     input{
         -webkit-user-select: auto;/*解决ios下input编辑无光标和文字*/
     }
     /*layout  -webkit-overflow-scrolling: touch;*/
html { width: 100%; height: 100%; overflow: hidden;font-size:50px;}
body { width: 100%; height: 100%; overflow: hidden; }
.wrap{ width:40rem;height: 100%;overflow: auto;}

=====>js

1.放在body元素下解决部分机型高度获取不正确

<script>
    document.body.style.height=document.documentElement.clientHeight+"px";    
</script>

2.防止页面a链接误触发和事件点透（滚动变卡 如果阻止页面所有默认行为默认滚动条会没有  按场景使用）

<script>

var aA =    document.getElementsByTagName('a');
        for(var  i=0;i<aA.length;i++){
                aA[i].addEventListener(
                    'touchstart',
                    function(e){
                        e.preventDefault();
                    }
                );
                
                aA[i].addEventListener(
                        'touchmove',
                        function(){
                            this.isMove=true;
                        }
                    );
                    
                aA[i].addEventListener(
                        'touchend',
                        function(){
                            console.log(this.isMove);
                            if(!this.isMove){//说明没有被移动过  移动过就不跳转了
                                window.location.href=this.href;
                            }
                            this.isMove=false;
                        }
                    );
                    
            };

</script>

3.移动端轮播图swiper的使用

            <section class="swiper-container swiper1">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide"><a href="javascript:"><img src="../images/move/产品介绍.jpg" alt=""></a></li>
                    <li class="swiper-slide"><a href="javascript:"><img src="../images/move/产品设计理念和特点.jpg" alt=""></a></li>
                    <li class="swiper-slide"><a href="javascript:"><img src="../images/move/产品的优势与价值.jpg" alt=""></a></li>
                    <li class="swiper-slide"><a href="javascript:"><img src="../images/move/主要功能模块.jpg" alt=""></a></li>
                    <li class="swiper-slide"><a href="javascript:"><img src="../images/move/底部-1.jpg" alt=""></a><span class="click">点击</span></li>
                </ul>
                <div class="swiper-pagination"></div>
            </section>

<script>

　<link rel="stylesheet" href="../css/move/swiper-3.3.1.min.css" />

    <script src="../js/jquery-1.12.4.js"></script>

    <script type="text/javascript" src="../js/move/swiper-3.3.1.jquery.min.js"></script>

           var mySwiper1 = new Swiper('.swiper1', {
            autoplay: 3500,//可选选项，自动滑动
            pagination : '.swiper-pagination',
             loop:true,
             paginationClickable: true,
            autoplayDisableOnInteraction : false
        });
//      var mySwiper = new Swiper('.swiper2',{
//          slidesPerView : 3.5
//      })

 

</script>

 

来源：https://www.cnblogs.com/pipixiaolaohu/p/7183864.html