本文是基于zepto框架下的手机移动端网站制作教程，适用于苹果的ios系统，和android系统。随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行，移动互联应用开发也越来越受到人们的重视，用html5开发移动应 用是最好的选择。然而，每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢。本文可以帮你解决这个问题。
感谢那些热心的朋友：给予帮助和支持。本文简介：1、手机移动端页面的自适应2、手机触摸手动滑动效果一、header信息的设置（自适应） 1、声明信息 <!DOCTYPE HTML> 2、编码设置 <meta charset="UTF-8"> 3、移动设备特别设置（重要声明！） <meta content="width=device-width,user-scalable=no" name="viewport"> Viewport说明：该设置可使我们开发出的页面/产品 大小可适应各种高端移动设备width=device-width 为设备的宽度.user-scalable=no/yes 此功能为用户调整缩放。默认为yes。一般设置为noPS:初次尝试制作移动端页面。亲们，由于我没有加上面的viewport声明，结果导致页面狼狈不堪。 添加前=》添加后=》二、手机触摸手动滑动效果1、触摸屏效果滚动组件（js必须包含的部分） <!--触摸屏效果滑动组件-->
<scripttype="text/javascript"src="./js/touch.js"></script>
<scripttype="text/javascript"src="./js/zepto.extend.js"></script>
<scripttype="text/javascript"src="./js/zepto.ui.js"></script>
<scripttype="text/javascript"src="./js/slider.js"></script>
<!--触摸屏效果滑动组件end-->
复制代码 <divclass="head_nav_C"id="hongye_nav"style="height:60px;">
<divstyle="background-color:white;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<divstyle="background-color:white;">
bbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
<divstyle="background-color:white;">
cccccccccccccccccccccccccccc
</div>
<divstyle="background-color:white;">
ddddddddddddddddddddddddd
</div>
</div>
复制代码 <script>
Zepto(function($){ //自动加载zepto组件
$("#hongye_nav").slider({ //为html 对应的id部分最佳slider属性
autoPlay : false, //是否自动
showDot : false,
loop : true,//是否循环
});
})
</script>
复制代码 <linkrel="stylesheet"type="text/css"href="css/slider.css"/>
复制代码