Dreamer

xhtml mp初体验

August 6, 2010 by dreamer

用xhtml mp顺利写了一个“你好手机!”页面后,几个非常棘手的问题就扑面而来,手机网站开发中遇到的繁琐挑战与我们终于开始了正面接触。用了一天的时间好好看了一下XHTML 移动概要 (XHTML MP) / WAP 2.0 教程 。下面是一些些笔记摘要。~( o . o )~

1. 什么是XHTML mp

XHTML mp即XHTML Mobile Profile(可扩展标记语言移动概要)。它是XHTML的完全子集,它是XHTML Basic + XHTML完整版一部分可用于移动设备的属性。

XHTML mp不支持客户端脚本,因此一些基本的验证也要放在服务器端进行。将来可能会有ECMAScript Mobile Profile-ESMP。

相关的一些概念

  • xhtml – 可视为用xml规范对html进行格式化
  • xhtml basic – xhtml简化版,无css、框架、script,由w3c规定
  • wcss/wap css - css2的简化版,有针对移动的扩展(实际开发实践中这些扩展并不太常用),由oma规定,与w3c的css mobile是不同的。

2. MIME类型

MIME即Multipurpose Internet Mail Extensions。

WAP2.0规定的MIME类型:xhtml, html, htm

  1. application/vnd.wap.xhtml+xml - OMA指定的MIME,N60系只能查看该类型。
  2. application/xhtml+xml – xhtml家族的MIME类型
  3. text/html - html的MIME类型,能确保IE6等某些web浏览器正常显示,但为非xml类型

我们做了两个页面:“查询”和“查询结果”。查询结果页面内容是由php动态生成的。但是从”查询“进入”查询结果“页面时,Firefox会弹出”查询结果“的文件下载对话框,而不是直接显示页面,Opera显示正常(让我们华丽滴忽视IE吧)。看了MIME的介绍后才明白应该是“查询结果”的MIME是Firefox不支持的。今天改为先在服务器端通过http accpt判断可接受的MIME类型,再返回相应的WAP2.0 MIME类型,Firefox下就显示正常了。

3. WAP2.0向后兼容WAP1.x

4.XHTML MP缓存控制、meta信息

对时间敏感的页面(例如定时刷新以查看最新信息),可以采用如下方法强制从服务器获取最新的文件:

<meta http-equiv="Cache-Control" content="no-cache" />
或者
<meta http-equiv="Cache-Control" content="max-age=一个很小的值或者0" />

并非所有的WAP浏览器都识别/支持meta中的cache设置。对于不识别的meta信息,WAP浏览器会忽略,不会报错。因此可以在meta中加入一些自定义的信息(如版权)。

对于不支持meta中设置cache的客户段,可以在服务端设置http响应头。如:
<?php header("Cache-Control:no-cache,must-revalidate"); ?>

5.间歇性刷新

6.<hr />标签不要被包含在<p>中

7. 字体风格需要WAP浏览器支持,如b和i

8.可用图片类型可以检查http头中的accept内容。accpt内容还可以用来检查客户端支持的MIME类型。

9.-wap-input-format 输入掩码样式

上面的笔记仅仅是这两天学习的一些摘要,其中一些概念理解可能有偏差,还待以后修正。

xhtml mp的出现对于广大web开发者绝对是一大福音。但是web上的一些html坏习惯也往往会给xhtml mp使用带来一些麻烦。由于手机设备的特殊性,和xhtml本身特点,手机网站开发更要遵守标准来进行,更多的考虑到设备、带宽、兼容性、用户体验等内容。这个领域还存在非常多需要“经验”来解决得问题,所以我想应该迅速上手,多观察、积累大网站在这方面得动作。这个周末打算重新温习一下xml和计算机网络关于http的部分。希望今年能够在wap上面有所作为。

ps,
这几天骑车上下班,晒黑了一大圈。在自行车道上常常被汽车的喇叭轰到渣⋯⋯这世道人心不古,脚踏车一族生存艰难啊~~甚至在林萃路上,被逼到人行道上的俺还常常被喇叭轰⋯⋯由此可见一个高高的马路牙子好重要啊!

Posted in: Mobile, User Interface, 工作整理 Tagged: wap, xhtml mp, 手机, 手机网站

Categories

  • ACG
  • Flash3D
  • Interaction&Front-end
  • Life
  • Mobile
  • User Interface
  • Visual Design
  • 工作整理
  • 懒人食谱
  • 服务器

Recent Comments

  • dreamer on Kill IE6?
  • 曉行 on Kill IE6?
  • Benny on 互动设计是神马?
  • 人人都爱vancl | Dreamer on 互动设计是神马?
  • dreamer on http协议复习笔记摘要

Tags

3dmax 3Z 403 960 Grid System acg android apache call to action code collada css CSS framework dae diy Don't Make Me Think flash httpd.conf papervision3d programing PV3D web wordpress xhtml xhtml mp 互动设计 产品 便当 凡客 咖喱 应用 快速阅读 懒人食谱 手机 手机网站 搬家 泰式 炒方便面 烟盒 界面 相册 瞬间之美 破面 虾 说明 银魂

Copyright © 2026 Dreamer.

Mobile WordPress Theme by themehall.com