本文是基于zepto框架下的手机移动端网站制作教程，适用于苹果的ios系统，和android系统。随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行，移动互联应用开发也越来越受到人们的重视，用html5开发移动应 用是最好的选择。然而，每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢。本文可以帮你解决这个问题。

本文简介：
1、手机移动端页面的自适应
2、手机触摸手动滑动效果

一、header信息的设置（自适应）
　　　1、声明信息
　　　2、编码设置  
　　　3、移动设备特别设置（重要声明！）
　　　 

Viewport说明：该设置可使我们开发出的页面/产品 大小可适应各种高端移动设备
width=device-width 为设备的宽度.
user-scalable=no/yes 此功能为用户调整缩放。默认为yes。一般设置为no
PS:初次尝试制作移动端页面。亲们，由于我没有加上面的viewport声明，结果导致页面狼狈不堪。 

添加前=》

添加后=》

二、手机触摸手动滑动效果
1、触摸屏效果滚动组件（js必须包含的部分）

本人亲测以上4个js必须包含，缺一不可。
2、所要在手机端做滑动效果的部位（html代码部分）

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccccccc
ddddddddddddddddddddddddd

3、js代码块（改代码会在动在要加滑动效果的html代码块中自动生成一块代码）

4、加载slider.css样式

附：
另外一种简单的写法(适用于幻灯)
html代码部分

　　<img lazyload=”images/img2.jpg” /> 　　<img lazyload=”images/img3.jpg” />
2、js代码部分

实例地址：打开微信扫一扫！

原文：http://www.thinkphp.cn/extend/461.html