如何制作手机端网站？

随着手机平板等移动智能设备的普及，移动端的网站制作也值得网站前端开发人员的关注。

手机端网站的制作和常规网站制作差别不是太大，主要考虑的是手机和平板种类繁多屏幕尺寸多样，因此，网站要使用响应式布局（JS兼容性要好）。

viewport

手机网站制作的注意点

网页比例：浏览者不能放大或缩小网站页面比例，这会影响用户体验

苹果链接：网站页面中长的数字串在苹果系统的移动端中会被认为是手机号而显示成链接，需要去除

手机尺寸：大部分的手机屏幕尺寸都是一样的，通过这个参数兼容不同手机页面很有效

手机分辨率：注意手机的屏幕分辨率问题，同等尺寸的手机屏幕的分辨率不尽相同

viewport 介绍

做手机端的网站，我们要接触的第一个概念就是“viewport”，称作视区，因为移动设备的屏幕一般都比PC小很多，如果用手机浏览器打开一个网页，用户只能通过拖动页面才能查看整个页面，这种用户体验非常差，所以，我们需要使用“viewport”来解决这个问题。

viewport 主要控制页面参数，比如设置视区宽度、兼容不同分辨率的手机、用户是否可以改变页面比例等。

优秀讲解一：苹果官方教程

优秀讲解二：http://zhanchaojiang.iteye.com/blog/1470586

优秀讲解三：http://www.php100.com/html/webkaifa/HTML5/2012/0831/10979.html

优秀讲解四：http://www.cnblogs.com/loalongblogs/archive/2011/06/21/2085971.html

viewport 使用

viewport 是元信息（meta标签）的一种，一般用法如下：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />

参数	说明	取值
width	视图的宽度	pixel_value：自定义像素值 device-width：设备自身宽度
height	视图的高度	pixel_value：自定义像素值 device-height：设备自身高度
target-densitydpi	屏幕像素密度	device-dpi：设备自身dpi high-dpi：高像素密度 medium-dpi：中像素密度（默认值） low-dpi：低像素密度 dpi_value：自定义，70-400
initial-scale	视图的初始缩放	float_value
maximum-scale	视图的最大缩放	float_value
minimum-scale	视图的最小缩放	float_value
user-scalable	用户是否能够缩放视图	yes | no

方法一：完全等比例映射

说明：这种方法的原理是先在拟定好网站的宽度，比如 640px，首先做好一个页面宽度为 640px 网页，做好漂亮的效果和兼容，然后再添加 viewport，只需要设置 target-densitydpi=device-dpi、width=640、user-scalable=no 三个参数就够了，其中注意的是此处的宽度应该是你拟定的宽度。

效果：在手机上浏览时细心的人就会发现，虽然页面的效果布局和在电脑上浏览的一致，但是页面内容却缩小了，这种缩小并不是部分缩小而是整体缩小，所有的元素都缩小了，但是如果你用 ipad 浏览的话，所有的元素会放大一点。

不同移动设备的页面缩放比例表
手机尺寸	320px	360px	640px	768px	1024px
页面缩放	0.5	0.5625	1	1.2	1.6

优点：样式布局效果基本上完全兼容，不用添加多余的JS代码。

缺点：内容被缩放了，如果页面拟定的宽度不合适，会影响用户体验。

最终代码：

方法二：精确响应式页面

说明：手机平板等移动端的网页浏览效果是取决于移动设备分辨率的，分辨率越高页面显示的内容就越多，可移动设备分辨率是变化的，就算手机尺寸相同分辨率也不尽相同，但是手机款式品牌再多分辨率再变，手机的屏幕尺寸确实相对固定的，基本上是320px、360px、480px、768px、1024px，因此，网页内容的宽度就得跟着移动设备的变化而改变，这种响应式的网页必须通过JS来实现。

制作：首先要设置 viewport，最重要的一项是 width=device-width，然后拟定一个页面宽度（500px或1000px）完成页面的制作，最后通过JS来做不同尺寸的移动设备的页面兼容，而且兼容原则是先宽度后高度，通过JS获取手机的屏幕宽度，下面就是考虑页面中哪些元素需要兼容，基本上有以下几种

①. 按比例

元素最终宽度 = 屏幕宽度 *（元素原先宽度 / 页面拟定宽度的有效部分（去除边框边距等））

元素最终高度 = 元素最终宽度 *（元素原先高度 / 元素原先宽度）

②. 两列中一列是固定值

元素最终宽度 = 屏幕宽度 - 多余部分（页面内外边距等） - 已知固定列的宽度

元素最终宽度有时是不需要兼容的，请酌情处理。

③. 多个等宽列

元素最终宽度 =（屏幕宽度 - 多余部分）/ 列数

优点：响应式的页面兼容性非常好，网页的用户体验也非常不错。

缺点：有时需要使用很多JS代码来做页面兼容，需要计算元素比例。

最终代码：

---

下面数据对手机网站开发很有帮助：

系统	设备名称	屏幕分辨率	屏幕尺寸
苹果	iPhone 4	xxxx*xxxx	320x480
	iPhone 4S	xxxx*xxxx	320x480
	iPhone 5	xxxx*xxxx	320x480
	iPad 4	xxxx*xxxx	320x480
安卓	小米 3	xxxx*xxxx	320x480
	三星 N7100	xxxx*xxxx	320x480
	三星 吉凤响	xxxx*xxxx	320x480

PS：以上数据来自小站的小伙伴们的测试，非常感谢，再次感谢，不谢不谢~