手机网站与普通网站的不同

1. 内容优先

手机分辨率比电脑的分辨率小很多，所以在手机版网页上只显示最主要的内容。下图所示是携程网的首页和手机版的首页。 

 

2. 垂直浏览取代水平浏览

如上图所示，普通站点的网页中，导航条都是横向的，而在手机版网页中，导航条（功能标签）都是纵向的。

3. 导航条，标签和超文本

在手机上，用户主要通过手指触摸屏幕来进行操作。为方便用户操作，网页上应尽量不使用超链接，而更多地使用导航条，标签和按钮。

4. 图片

在移动站点设计中，应该减少图片的使用，原因有二：其一，一些移动设备并不支持和传统网页站点一样显示方式；其二，移动屏幕较小，显示内容有限，除此之外，过多的显示内容会降低移动设计的运行速度。

5. 全局导航与情境导航

在桌面站点中，可以使用各种各样的导航方式，如全局导航和情境导航。移动站点采用全局导航，情境导航极少。

在移动站点中，移动设备有限的屏幕决定了应该减少全局导航和情境导航。然而，缺少全局导航和情境导航则会让用户迷失，为此，在构建移动内容时，应该尽量减少层级关系，这样，用户无需挖得太深就可以找到自己所需的信息，作为设计师，应该让用户在迷失之前找到自己的信息。

6. 滚动条

手机浏览器没有滚动条，所以在计算机浏览器中出现滚动条的地方在手机浏览器上不一定能够按照预想的那样来显示，下图中的下拉列表输入域在台式机上能够正常显示，但在手机上只能显示前几个选项，需要滚动才能看到的项根本显示不出来。

 

7. 手机浏览器对某些css属性不支持

例如：position：fixed

如果需要在手机屏幕显示top bar、bottom bar，则比较麻烦，需要通过css+javascript来实现。