手机网站开发笔记2 – 完整的头部声明

dUcky — Fri, 09 Apr 2010 02:48:28 +0000

接上一篇概述，说一说手机网站网页的头部声明。

xml version="1.0" encoding="utf-8"?>
DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml;charset=utf-8" />
<meta http-equiv="Cache-Control" content="must-revalidate,no-cache" />
<meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=2.0;user-scalable=1" />
<title>我们的故事 iHandu.com - dUckytitle>
<link href="style/mobile.css" rel="stylesheet" type="text/css" />
head>

上面的代码就是一个完整的手机网页的头部，解释几个比较特别的：

line 1: xml 的声明并不是必要的，但是听说会影响某些 wap 浏览器，比如 Sony Ericsson 的一些型号，“ 当接收到的 MIME 类型为 text/html 时, 会利用 XML 声明来区分 XHTML MP 和 IHTML（一个 NTT DoCoMo 定义的有专利的标记语言）文档；如果文档包含 XML 声明，它就是一个 XHTML MP 文档，否则它就是一个 IHTML 文档。”

line 2: 定义 DTD 的名字，声明了使用 XHTML Mobile 1.0 为内容格式。

line 5: “由OMA 定义的 XHTML MP 内容的首选 MIME 类型为：‘application/vnd.wap.xhtml+xml’ 。这一类型可以用于向 XHTML 用户代理提供 XHTML MP 文档支持。另外，也可使用 ‘application/xhtml+xml’ 。在一些 Symbian Series 60 浏览器上，必须使用 MIME 类型 ‘application/vnd.wap.xhtml+xml’ 以确保正确的 XHTML MP 内容视图。”

line 6: 设置浏览器缓存，这里是禁止缓存， must-revalidate 是针对某些浏览球通过返回按钮回到上一个标签而不重新装载。

line 7: 针对 iphone 的设置。width: 宽度；height: 的高度；initial-scale: 初始的缩放比例；minimum-scale: 允许用户缩放到的最小比例；maximum-scale: 允许用户缩放到的最大比例；user-scalable: 用户是否可以手动缩放。

其他都是最基本的，当然你也可以加上 keywords 或者 description 的 meta 标签。

（文中一些打双引号引用的文字都来源于网上的资料，但是我找不到源头了，感谢那些分享的人）

最后是 W3C 提供的移动网页使用的 XHTML 验证工具，它会对你做的页面提出建议和不符合标准的地方。

手机网站开发笔记1 – 概述

dUcky — Tue, 06 Apr 2010 12:03:54 +0000

手机网站由于大家都是起步不久，所以网上有用公开的资料并不是很多，特别是国内。下面从头说起。

什么是 wap2.0 ？

wap 是无线应用协议（Wireless Application Protocol）。wap2.0 就是 wap 的第二个版本。
wap1.X 规定无线设备访问的页面是用 WML 语言编写的，但是 WAP2.0 将 XHTML MP 做为主要内容格式。
via 中文 wikipedia

什么是 XHTML MP ？

XHTML MP 是 XHTML 的子集，因此继承了它的语法。用 XHTML MP 构建的页面，以供手持设备的访问，如手机、PDA等。

页头声明：

1	DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

XHTML Mobile Profile (XHTML MP) via wikipedia

这样看来，其实与我们平时用的 xhtml 差别不是很大，但是与一般网站用的 xhtml、css、js 还是有很多不一样的地方，从之前的实践者我们就可以看到。

感谢淘宝的设计师以及工程师的分享精神，让我们少走不少路。更提醒我们兼容性是一个很大的问题。下面的这张表是在 twitter 上 follow 前端大师 @ppk 的同学们的手机浏览器环境调查：

Phone types and browsers

看花了眼吧…所以兼容性从前期规划到后期测试都非常重要。

更多的东西还要在自己的实践中去总结，最后推荐的是：PPK 关于手机网站开发的研究，以及在蓝色理想找到 W3C 在移动 web 设计和用户体验的推荐标准：W3C移动web最佳实践1.0中文版.pdf，叙述了 60 条有关手机网站需要注意的地方。

我们的故事 » xhtml

手机网站开发笔记2 – 完整的头部声明

相关文章

手机网站开发笔记1 – 概述

什么是 wap2.0 ？

什么是 XHTML MP ？

相关文章