移动网站开发全攻略：从设备检测到首页布局

# 移动网站开发全攻略：从设备检测到首页布局 ## 1. 移动设备检测与适配系统 ### 1.1 Tera - WURFL 解决方案 Tera - WURFL（www.tera - wurfl.com）从 WURFL 获取设备信息，是一个免费的开源解决方案，虽接受捐赠，但基本可作为完整方案使用，只是缺少重定向脚本，需自行编写。该方案文档完善，不过由于免费，技术支持主要通过用户论坛和网络资源获取。若需要一个精细的按设备检测和适配系统，它是不错的起点。 ### 1.2 设备分类的必要性 在移动设备接入网络之前，网站创建相对简单，设计师主要关注带宽和显示尺寸（或显示器分辨率）。但随着移动设备的普及，网站设计变得复杂。如今，若要根据设备属性和功能创建不同的网站，就需要对设备进行分类，即建立移动设备类系统。可以通过创建一组配置文件来实现，每个配置文件代表网站的一个版本。 ### 1.3 确定网站版本数量 确定需要多少个网站版本是个复杂的问题，需要考虑以下因素： - 可用时间 - 雇主或客户愿意投入的资金 - 移动网络用户在营销策略中的重要性 - 愿意在网站上投入的工作量 ### 1.4 寻找最低公分母 在网页设计中，设计到最低公分母意味着找到一系列设备中最常见的标准特性。对于桌面计算机，将页面宽度设计不超过 900 像素，大多数人无需左右滚动即可查看页面。但对于手持设备，找到最低公分母并不容易，因为屏幕尺寸从 100 或 200 像素到 1000 像素以上不等，且屏幕尺寸并非唯一需要考虑的因素。除屏幕尺寸外，还需确定以下方面的公分母： - 支持的 HTML 和 CSS 版本 - 对 JavaScript 的支持 - 对数字视频的支持（以及支持的格式） - 对 Flash 的支持（以及 Flash Player 的版本和 Flash 功能） ### 1.5 选择配置文件策略 创建设备配置文件有多种可行方法，以下两种比较合理： - 从具有最少功能集的配置文件开始，逐步添加功能以创建更复杂的配置文件。 - 从功能集的高端开始，逐步去除功能以创建较简单的配置文件。 ### 1.6 示例配置文件 为了演示配置文件的工作原理，可以从为最新、最复杂的设备创建配置文件开始，然后逐步为功能较少的手持设备创建配置文件。以下是一些示例配置文件： | 配置文件名称 | 设备特点 | | ---- | ---- | | mobile1 | 包括类似 iPad 的手持平板电脑，支持大多数桌面计算机的网络功能，如 HTML5、CSS3、Flash Player 10.x（iPad 不支持 Flash）和高分辨率显示（1024 像素或更宽）。虽无需单独创建网站，但考虑到其手持特性、触摸和多触摸支持以及屏幕方向切换功能，值得单独分类。 | | mobile2 | 包括 iPhone、iPod、最新的 Android 智能手机、最新的 Palm OS 设备和许多 Windows Phone 7 设备。这些设备功能强大，但屏幕尺寸较小（约 320 - 640 像素宽），为 mobile1 设计的页面可能不适用于此类设备。 | | mobile3 | 主要包括不支持 HTML5、CSS3 或 JavaScript 的旧智能手机。屏幕尺寸与 mobile2 类相似，但由于缺乏 JavaScript 支持，设计选项受限。 | | mobile4 | 包括功能较弱的功能手机，屏幕较小（约 320 像素或更小），仅支持最简单的 CSS 格式，对 Flash 和数字视频的支持也很有限。 | ### 1.7 完善类系统 上述四个配置文件几乎涵盖了所有支持网络的手持设备，后续添加的配置文件主要用于细化或调整。例如，可以为不支持 Flash 的 Apple 设备创建 mobile1 和 mobile2 的子类，为屏幕非常小（约 240 像素或更小）的设备创建 mobile4 的子类。创建多少配置文件取决于时间、资源以及与营销策略或网站目的的权衡。 ### 1.8 让用户选择 最简单且可靠的适配系统是让用户选择是否查看网站的移动版本。可以提供一个或多个基于设备类型或屏幕尺寸的移动版本链接。这种方法虽技术含量较低，但很常见，许多大型网站都提供此选项。不过，最好先使用某种检测方法确定访客是否使用手持设备，再提供替代网站的菜单，这样更专业。 ### 1.9 子域名或子目录 在从子目录部署内容到网络时，设置 URL 有两种选择： - 使用子目录路径作为 URL 的一部分，如 http://www.mysite.com/subdirectory。 - 通过 DNS 子域名指向子目录，如 http://subdomain.mysite.com。 两种方法都可行，但创建替代网站时，子域名看起来更专业，但设置相对复杂，需要为每个替代网站创建 DNS 记录。 ## 2. 移动网站首页布局 #