
一番折腾之后,鹏讯手机版终于上线测试了,开发笔记如下:
多个wp共享同一个数据库
首先要解决的就是多个wp共享同一个数据库。一开始,测试了
<style type="text/css" media="handheld">@import url(handheld.css );</style>
发现只有 opera 等高级浏览器才能识别,而 ie ucweb 等根本不予理睬。进一步测试 wp 自定义 page template,自由是自由了,但是毕竟是 url rewrite 不能使用 m.pensee.net.cn 子域。最终决定 多个wp共享同一个数据库。
详细步骤在我的 wiki – 多个wordpress使用同一个table。
编码和验证
选定 XHTML Basic 1.1 DOC。Wap html 标准以前是 wml,现在回到了 xhtml。常见的几个标准如下:
MP = Mobile profile
XHTML Basic W3C Recommendation 19 December 2000 - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
XHTML MP 29-Oct-2001 - <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
XHTML MP Candidate Version 1.1 - 16 Aug 2004 - <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.wapforum.org/DTD/xhtml-mobile11.dtd">
XHTML MP Candidate Version 1.2 - 18 Jan 2005 - <!DOCTYPE html PUBLIC "-//OMA//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
XHTML Basic 1.1 W3C Editors Draft 1 Nov 2006 - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
2008年七月 W3C 的推荐是 XHTML Basic 1.1,而且在 W3C的 W3C mobileOK Checker上也推荐的是 XHTML Basic 1.1,不用再说,选定。下面是验证结果
W3C mobileOK Checker 验证 m.pensee.net.cn
验证中出现了一些问题,部分罗列如下(包括错误和警告):
A “javascript:” link is used
不用使用 a href=”javascript:xxxx”
Invalid HTTP response received (network-level error, DNS resolution error, or non-HTTP response)
无效的 HTTP response
The document does not validate against XHTML Basic 1.1 or MP 1.2.
要先通过 W3C xhtml 验证
Either the height or width attribute is missing
图片不给高宽,下载完后会重画页面,用户体验不好
The documents uses one of b, big, i, small, sub, sup or tt elements
以下标签已经不推荐使用了(不够 sematic)
The style attribute is used
内联(inline)样式表(div style=”xxx”)还有使用的必要吗?(主要是为了调试方便,嘿嘿…)
The total size of the page (98.6KB) exceeds 20 kilobytes (Primary document: 28.2KB, Images: 69.1KB, Style sheets: 1.3KB)
页面超过20k了
There are more than 20 embedded external resources
超过20个 HTTP requests 了,手机可能要20秒以上时间才能显示
The size of the document’s markup (28.2KB) exceeds 10 kilobytes
纯html文件超过 10k
The document uses scripting
手机对js支持有限,要保证即使没有js也要能显示
css A length property uses an absolute unit
反对使用 pt,px 之类绝对尺寸,推荐 em % smaller 之类
The resource does not specify UTF-8 as character encoding
使用了非 utf-8的编码
The CSS style sheet contains rules referencing the position, display or float properties
position float 这些东西不推荐,没有样式表应该也可读才行。推荐使用 @media handheld 语法
The CSS Style contains at-rules, properties, or values that may not be supported
@ 可能不支持,尽量css1
The embedded image or object is not of type image/gif or image/jpeg (image/png)
不是所有手机都支持png
There is a small fully transparent image
有个全透明的图片(spacer.gif 也就是N年前的 shim.gif)
The document is served without caching information (“Expires” or “Cache-Control” header)
没有设置缓存过期时间
The document is not served as “application/xhtml+xml”
没有伺服成 “application/xhtml+xml”。但是设置成 application/xhtml+xml,ie这个笨蛋会提示下载网页!但手机上的 ie 可以浏览。
HTTP status code 3xx (Redirection) received and the HTTP Location header targets a relative URI
少转向
HTTP status code 401 (Unauthorized) received for a linked resource
进入需要验证的地方,要给用户个提示
The linked resource character encoding may not be appropriate for mobile devices
链接到非 utf-8 站点的时候,提前转义可能导致错误
The fragment reference has no matching target
a=”#1″ 这样的链接不推荐
Consider adding an inputmode attribute to this input element.
input 应该加入 inputmode 属性
加入htaccess AddType css 为 utf-8,php 自己送头 header
当然,还有很多小问题我懒得记录,看 pensee.net.cn/m 的源代码吧。
测试
先用 opera 打开 small screen 测试。
然后用 http://emulator.mtld.mobi/emulator.php(需要 java 虚拟机)测试内容,中文乱码。用 http://ready.mobi/launch.jsp?locale=en_EN 测试代码,通过。
也可以下载 openwave 的 phone simulator 进一步测试
Mobi ready 验证问题
Mobi ready 发现的问题如下:
Links were detected in your page, but no access keys were used
链接应该加入 accesskey
2nd LEVEL DOMAIN
没有使用二级域名
最后干脆,借了一个 windows ce(mobile?) 手机测了一下。ie 不识别 handheld,ucweb 啥也不认识,但是文字是出来了。
关于ucweb 和其它手机浏览器
简单地说,opera 和 safari(iphone)最好,S60 的 webkit(和safari一样)也可以,ie次之,ucweb 最烂。ucweb 实际上就不是浏览器,用户看到的是通过uc服务器版转换过的东西。(页面解析处理在服务器上而不是客户端,这样可以逃过客户端复杂的功能开发和过大的体积)。quirksmode 手机浏览器css支持调查表中甚至都没有提到 ucweb,:(
摘选网友评论如下:
1. 标签的默认样式基本全无,省的reset了
2. 甭想改变字体和字号,甭想加粗
3. 可以设背景色,但设背景图没戏
4. 除了图片和input[type=image]可以设宽高外,其它元素都无法定义宽高
5. 根本无法实现左右布局,用table也没戏
6. 定义不了margin和padding
7. hr表现为一条虚线
8. 无法定义button的样式,只能用image类型的input代替
9. 似乎只有li标签支持float属性
10. input输入框无论怎样都独占一行
11. 居然支持dataURI (但仍然会在前面的图片显示完再显示)
12. 别改变body的背景色,会出问题
13. javascript就更不支持了
UCWEB 显示的网页和图片是通过 UCWEB 服务器压缩并中转的,并非原始文件。所以极省流量,同时功能自然也是大打折扣的。也就是说,它不是一个完整的浏览器平台,它只是一个“网页阅读器”。不过值得一提的是,它可以显示页面中的 Ajax 内容,也就是说,UCWEB 的中转服务器是可以运行 JS 的。
嗯,它的某些设计确实对用户有益,节省流量还是很实在的。m.bing.com的做法是针对不同user agent加载相应的css和js增强UI效果,还是不错的。http://dev.opera.com/articles/view/opera-mobile-10-beta-developers-introduction/ opera mini也是先在服务器端渲染,再发送一份压缩版的给手机端。opera mobile 10则是一个彻底的浏览器了
1 UCWEB不支持WML(WAP 1.3,具体是$var语法),无法登录99%的WAP站点
2 UCWEB不支持服务器脚本的重定向(ASP:Response.Redirect)
3 UCWEB不支持CSS样式表,基本无法定制界面(部分表格布局网页貌似效果不错)
4 UCWEB不支持META自刷新,只要检测到有这段就自动放弃整个页面的解析
5 UCWEB不支持客户端JS脚本,”执行”JS就要全页面刷新,严重浪费用户流量费
我只能说UCWEB连一个WAP浏览器都不如,是一个”超低能”浏览器
用户 user agent 判断处理
暂时暂用最低级的办法,:)首页判断
if(preg_match('/mobile/',strtolower($_SERVER['HTTP_USER_AGENT']))){
header("Location: http://m.pensee.net.cn/");
}
ucweb 或者 ieMobile,不含 operamini 等,暂时如此。人家的代码还是专业啊,半路杀入的url也自动转换,这要求两边站点 url 一致!
if($isMobile){
header('Location: http://m.mowser.com/web/' . urlencode($_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']));
exit();
}
判断 mobile 和 bot 的代码也很长啊
$isMobile = false; $isBot = false; $op = strtolower($_SERVER['HTTP_X_OPERAMINI_PHONE']); $ua = strtolower($_SERVER['HTTP_USER_AGENT']); $ac = strtolower($_SERVER['HTTP_ACCEPT']); $ip = $_SERVER['REMOTE_ADDR']; $isMobile = strpos($ac, 'application/vnd.wap.xhtml+xml') !== false || $op != '' || strpos($ua, 'sony') !== false || strpos($ua, 'symbian') !== false || strpos($ua, 'nokia') !== false || strpos($ua, 'samsung') !== false || strpos($ua, 'mobile') !== false || strpos($ua, 'windows ce') !== false || strpos($ua, 'epoc') !== false || strpos($ua, 'opera mini') !== false || strpos($ua, 'nitro') !== false || strpos($ua, 'j2me') !== false || strpos($ua, 'midp-') !== false || strpos($ua, 'cldc-') !== false || strpos($ua, 'netfront') !== false || strpos($ua, 'mot') !== false || strpos($ua, 'up.browser') !== false || strpos($ua, 'up.link') !== false || strpos($ua, 'audiovox') !== false || strpos($ua, 'blackberry') !== false || strpos($ua, 'ericsson,') !== false || strpos($ua, 'panasonic') !== false || strpos($ua, 'philips') !== false || strpos($ua, 'sanyo') !== false || strpos($ua, 'sharp') !== false || strpos($ua, 'sie-') !== false || strpos($ua, 'portalmmm') !== false || strpos($ua, 'blazer') !== false || strpos($ua, 'avantgo') !== false || strpos($ua, 'danger') !== false || strpos($ua, 'palm') !== false || strpos($ua, 'series60') !== false || strpos($ua, 'palmsource') !== false || strpos($ua, 'pocketpc') !== false || strpos($ua, 'smartphone') !== false || strpos($ua, 'rover') !== false || strpos($ua, 'ipaq') !== false || strpos($ua, 'au-mic,') !== false || strpos($ua, 'alcatel') !== false || strpos($ua, 'ericy') !== false || strpos($ua, 'up.link') !== false || strpos($ua, 'vodafone/') !== false || strpos($ua, 'wap1.') !== false || strpos($ua, 'wap2.') !== false; $isBot = $ip == '66.249.65.39' || strpos($ua, 'googlebot') !== false || strpos($ua, 'mediapartners') !== false || strpos($ua, 'yahooysmcm') !== false || strpos($ua, 'baiduspider') !== false || strpos($ua, 'msnbot') !== false || strpos($ua, 'slurp') !== false || strpos($ua, 'ask') !== false || strpos($ua, 'teoma') !== false || strpos($ua, 'spider') !== false || strpos($ua, 'heritrix') !== false || strpos($ua, 'attentio') !== false || strpos($ua, 'twiceler') !== false || strpos($ua, 'irlbot') !== false || strpos($ua, 'fast crawler') !== false || strpos($ua, 'fastmobilecrawl') !== false || strpos($ua, 'jumpbot') !== false || strpos($ua, 'googlebot-mobile') !== false || strpos($ua, 'yahooseeker') !== false || strpos($ua, 'motionbot') !== false || strpos($ua, 'mediobot') !== false || strpos($ua, 'chtml generic') !== false || strpos($ua, 'nokia6230i/. fast crawler') !== false;
看了一下这个 detectmobilebrowsers.mob 的代码,更长更专业一点,大家都是解析 user agent,可惜没有 ucweb,看来我们这片神奇的土地果然与世界不同啊,打住…
更多参考
designing for mobile web
mobile web design trends 2009/
Quirksmode Mobile tests




