12、移动网站与HTML5移动网页应用全解析

移动网站与HTML5移动网页应用全解析

1. 专用移动网站

1.1 概述

专用移动网站在很多概念上与动态移动网站有相通之处，但它是从头开始构建的，限制较少，更易关注细节以打造最佳移动浏览体验，也是进行全响应式网站设计的好机会。在规划新的移动网站时，提前设计至关重要，可修改网站地图，仅保留移动浏览所需页面，还需根据移动用户需求改写内容，使其更简短。

1.2 设计准则

1.2.1 减小文件大小

避免使用32位PNG图像，因其文件大小最大。建议使用JPG和GIF文件，若需透明效果，可使用8位PNG文件，它支持Alpha透明度，在现代移动浏览器中显示效果良好。

1.2.2 增大用户界面元素尺寸

优化按钮和链接的大小与间距，确保用户在测试网站时能用拇指轻松点击按钮。保证按钮和链接有较大的热点区域，同时增大移动版的字体大小和行间距。

1.2.3 利用CSS3

现代移动浏览器对许多减少设计元素图像需求的CSS3新属性支持良好，可加快开发速度。以下是一些示例：
- 渐变： background: linear-gradient(top, #000000 0%,#ffffff 100%);
- 圆角边框： border-radius: 15px;
- 盒子阴影： box-shadow: 10px 10px 5px #888;
- 文字阴影： text-shadow: 2px 2px 2px #000;