手机网站

   制作现在的智能手机网站，总体来说与电脑网站大同小异，但仍然有以下几点要特别注意：

1、 设计时，要充分考虑到触屏远不如鼠标点击精确，链接可触及面必须要大，而且不同链接不可以靠的过近，以免胖手指着操作困难，原则上至少应该是电脑鼠标操作的2-3倍以上的链接面积和间隔。

2、 手机站上不能使用flash，特效只能用js或html5实现。

3、 尽管以往通常手机站是按照320px分辨率来设计，但由于实际现在的智能手机分辨率都远远高于320px，甚至超过笔记本的分辨率，而且能够在0.5-2.0倍范围内使用宽度自适应标签缩放，因此设计宽度应使用640甚至720px。。

4、 切图前，更要注意严格按切图规范，将整图用Fireworks选取92%（最好95%）以上的某个最佳质量、大小平衡点，优化导出一次，由于手机一般是在无线网络环境下，加之上面将提到的，图片要用大图缩小显示，所以该优化步骤显得比制作电脑网站更为重要。

5、 无论采用div还是table布局，为了适应不同分辨率手机都满屏，务必使用百分比定义宽度，而不是具体像素，这是与电脑网站布局的最大不同。

6、 图片也是如此，宽度使用其相对于上级容器的百分比，高度不要设置，保持自动等比显示；没有特别需要，不要把图片作为css背景调用（除了下面提到的按钮背景），这样不便于使用上面提到的缩小显示和等比缩放，也不直观不方便修改。

7、 由于图片上的文字对于缩放后最容易产生模糊或失真的感觉，因此要避免使用有文字的图片按钮，应把文字直接显示，图片只作为按钮背景。

8、 对于文章列表之类页面，由于触屏的习惯一般是整行都可以点击（而非仅标题可点击），因此加链接时注意不同于电脑站，要把a标签放在li标签外层，如：<a href=”1.html”><li>文章标题1</li></a>；table布局则可考虑把整个td使用js设为可点击，如：<td onclick="window.location='1.html';" style="cursor:pointer;">。

9、页面head必须加这2个标签：

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

<meta name="apple-mobile-web-app-capable" content="yes" /> 

10、苹果和安卓480、720、1080分辨率手机均应测试。