‘mobile web’ Category Archives
五
手机浏览器测试
作者： boke ，分类： mobile web
在Peter-Paul Koch的网站发现了他做的一组关于手机浏览器对javascript、css、DOM支持情况的测试，主要包括三个，这里收集一下，以备后用。
Compatibility table，分析了一些通用的DOM方法，AJAX，触摸事件，键盘事件，字体样式和自定义事件等。
CSS compatibility table，测试了各种css选择符及部分属性。
CSS OM module，测试了window，screen等对象的属性，鼠标位置等。
二
.xhtml扩展名
作者： boke ，分类： markup language, mobile web
今天在研究手机开发时的javascript应用时，不经意间发现了个小问题，现来看一下这两个文件：
a.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>1</title>
<script type="text/javascript">
window.onload = function()
{
var pp = document.documentElement.childNodes;
for (p in pp)
{
alert(pp[p]);
}
}
</script>
</head>
<body>
</body>
</html>
b.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>1</title>
<script type="text/javascript">
window.onload = function()
{
var pp = document.documentElement.childNodes;
for (p in pp)
{
alert(pp[p]);
}
}
</script>
</head>
<body>
</body>
</html>
发现两个文件的不同之处了吗？其实上面两个文件是完全一样的，除了扩展名。
由于要做手机开发，有人建议说用.xhtml这个扩展名更好一些，于是就用了。本想用js得到body这个节点，结果试了几次pp[0]都不对。
我用的是XHTML-MP 1.2的DOCTYPE，难道DOCTYPE不对？好，换成标准的xhtml的DOCTYPE，就是a.xhtml这样的，还是不对啊！
难道js代码写的有问题？（这里有段小插曲，在下篇文章详述）百度一下，再翻出以前写的看看，没问题啊！还有哪儿不对呢？
按网上和我以前的经验来说，pp[0]是<head>，pp[1]是<body>才正对呀！不管了，先把pp都alert出来看看是啥东西再说。这一alert发现问题了，多出三个[object Text]，分别位于<head>前面，<head>和<body>之间，<body>之后。这种情况，甭问肯定是换行符所致，删掉，果然没问题了。
记得以前没出现这种情况，那可能就是扩展名的问题了，另存为b.html，再试，没问题了，这才恍然大悟，怪不得年前看过一个手机页面，一个换行符也没有。
来个刨根问底，查查这个.xhtml到底咋回事，百度了半天，没找到，google了半天，好像（为什么加个好像呢?答案看我2月12号的饭否）也没找到。
哪位有缘人路过提点提点，期待ing！！！
一
手机使用AJAX
作者： boke ，分类： JavaScript, markup language, mobile web
测试一下手机浏览器对AJAX的支持：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//OMA//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>title</title>
</head>
<body>
<div id="a"></div>
<div id='b'></div>
<input type="button" onclick="startXMLHttp();" value="发送GET" />
<div id="a1"></div>
<div id='b1'></div>
<input type="button" onclick="startXMLHttp1();" value="发送POST" />
<script type="text/javascript">
//<![CDATA[
var xmlHttp;
function createXMLHttp()
{
if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(e) {};
}
}
}
function startXMLHttp()
{
createXMLHttp();
var sendStr = "name=博科&age=23";
sendStr = encodeURI(sendStr);
var t1 = document.createTextNode(sendStr);
document.getElementById('a').appendChild(t1);
xmlHttp.onreadystatechange = doSomething;
xmlHttp.open('GET','ajaxtest.php?'+sendStr,true);
xmlHttp.send(null);
}
function doSomething()
{
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{
var t2 = document.createTextNode(xmlHttp.responseText);
document.getElementById('b').appendChild(t2);
//document.getElementById('b').innerHTML = xmlHttp.responseText;
}
}
}
function startXMLHttp1()
{
createXMLHttp();
var sendStr = "name=博科&age=23";
sendStr = encodeURI(sendStr);
var t3 = document.createTextNode(sendStr);
document.getElementById('a1').appendChild(t3);
xmlHttp.onreadystatechange = doSomething1;
xmlHttp.open('POST','ajaxtest1.php',true);
xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlHttp.send(sendStr);
}
function doSomething1()
{
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{
var ret = eval('('+xmlHttp.responseText+')');
var t4 = document.createTextNode('你的名字是'+ret.name+'，年龄是'+ret.age);
document.getElementById('b1').appendChild(t4);
//document.getElementById('b1').innerHTML = xmlHttp.responseText;
}
}
}
//]]>
</script>
</body>
</html>
由于是xhtml，如果服务器返回的数据里面有“&”，“<”等特殊字符，以及html标签等，就会提示解析错误，所以我们不能使用document.getElementById(‘b1′).innerHTML = xmlHttp.responseText了，这里需要注意。
推荐在服务器端将数据组装成JSON格式，然后在客户端使用createElement()，appendChild()等DOM方法生成所需的样式。
一
xhtml mp的事件支持测试
作者： boke ，分类： markup language, mobile web
以下是xhtml mp支持的事件，其中onload和onclick事件是规范规定浏览器必需支持的，其它为可选。具体哪种元素支持哪些事件，因浏览器不同而不同，可以修改以下代码进行测试。还附加了个XMLHttpRequest对象检测。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//OMA//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>DOM Events Test For XHTML Mobile Profile</title>
</head>
<body>
ajax:<label id="ajax"></label><br />
onload:<label id="load"></label><br />
onunload:<label id="unload"></label><br />
onclick:<label id="click"></label><br />
ondblclick:<label id="doubleclick"></label>
onmousedown:<label id="mousedown"></label><br />
onmouseup:<label id="mouseup"></label>
onmouseover:<label id="mouseover"></label><br />
onmousemove:<label id="mousemove"></label>
onmouseout:<label id="mouseout"></label><br />
onfocus:<label id="focus"></label>
onblur:<label id="blur"></label><br />
onkeypress:<label id="keypress"></label>
onkeydown:<label id="keydown"></label><br />
onkeyup:<label id="keyup"></label>
onsubmit:<label id="submit"></label><br />
onreset:<label id="reset"></label>
onselect:<label id="select"></label><br />
onchange:<label id="change"></label><br />
<form action="" method="get" id="f1">
<input type="button" value="点击我" id="b1" />
<input type="text" value="点击我" id="t1" />
</form>
<script type="text/javascript">
//<![CDATA[
/**
* Ajax支持判断
*/
var xmlHttp;
function createXMLHttp()
{
if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(e) {};
}
}
}
createXMLHttp();
if (xmlHttp)
{
document.getElementById('ajax').innerHTML = "支持";
}
else
{
document.getElementById('ajax').innerHTML = "不支持";
}
/**
* 从这里开始
*/
function $(id)
{
return document.getElementById(id);
}
window.onload = function()
{
$('load').innerHTML = "支持";
if (window.onresize)
{
$('resize').innerHTML = "支持";
}
}
$('b1').onclick = function()
{
$('click').innerHTML = "支持";
$('f1').onsubmit();
$('f1').onreset();
}
$('b1').ondblclick = function()
{
$('doubleclick').innerHTML = "支持";
}
$('b1').onmousedown = function()
{
$('mousedown').innerHTML = "支持";
}
$('b1').onmouseup = function()
{
$('mouseup').innerHTML = "支持";
}
$('b1').onmouseover = function()
{
$('mouseover').innerHTML = "支持";
}
$('b1').onmousemove = function()
{
$('mousemove').innerHTML = "支持";
}
$('b1').onmouseout = function()
{
$('mouseout').innerHTML = "支持";
}
$('t1').onkeydown = function()
{
$('keydown').innerHTML = "支持";
}
$('t1').onkeypress = function()
{
$('keypress').innerHTML = "支持";
}
$('t1').onkeyup = function()
{
$('keyup').innerHTML = "支持";
}
$('t1').onfocus = function()
{
$('focus').innerHTML = "支持";
}
$('t1').onblur = function()
{
$('blur').innerHTML = "支持";
}
$('t1').onselect = function()
{
$('select').innerHTML = "支持";
}
$('t1').onchange = function()
{
$('change').innerHTML = "支持";
}
$('f1').onsubmit = function()
{
$('submit').innerHTML = "支持";
return false;
}
$('f1').onreset = function()
{
$('reset').innerHTML = "支持";
return false;
}
//]]>
</script>
</body>
</html>
一
手机页面设计及编写的建议规则（一）
作者： boke ，分类： markup language, mobile web
我总结的手机web页面设计及编写规则，适用于xhtml basic 和 xhtml mp。仅代表个人观点。
1. 设计相关
1.1 硬件限制
推荐结构
手机屏幕由于尺寸、分辨率和色彩的限制，不能正常显示我们用于普通显示器的设计。在设计mobile web时要注意尽量避免产生滚动条，必需有滚动条时要保障只在一个方向上产生，如右图所示，不使用传统的上左右下结构，而使用上下结构。应该把主要的导航链接放在页面顶部，而且应当尽量精简，1或2行较为适宜。如果需要其它次要的导航就放在页面底部，这样用户打开页面后无需滚动就能看到页面的主要内容。不要使用过于复杂的色彩，手机屏幕不一定能正常显示，只要使网站总体风格一致即可。
手机网络往往要比有线链接要慢，例如，中移动GPRS升级EDGE后峰值只有384kbps，而且由于机制所限，手机连接互联网会产生较高的延迟，这些都将导致页面加载时间的延长；使用移动网络需要用户支付的费用通常会比较高，中移动降价后的GPRS流量费仍高达0.01元/KB。（不知升级3G后会是何种情况，呵呵）
在进行页面设计时应注意图片，flash等元素的使用，不要尺寸和字节数过大的图片，这样加快网页加载，不产生不必要的滚动条，降低用户的使用成本。
版本低一点的手机浏览器往往不支持脚本或插件，而且在许多情况下，用户没有选择的浏览器或者升级旧浏览器的余地。像重新载入网页，构建表，处理不必要而且复杂的样式表，处理无效的标记等等这些操作，由于手机的处理能力通常都相当有限，这意味着网页渲染可能需要很长时间才能完成，这将引起明显的延迟，并且浪费更多的电池电量。
1.2 用户输入
手机输入一般都不像使用普通键盘那么方便，而且一般手机都没有像鼠标这样的指点设备，应尽可能让用户少输入内容。例如一个较长的URI，用户没有耐心去输入它，而且也不能保证输入的正确性。
例如：不推荐使用这样的URI
“http://www.example.org/index.html”，
推荐使用这样的
“http://example.org”。
1.3 用户目标
用户通过手机上网浏览所需的网页时，通常都比桌面用户有更具体的目标，他们的意图往往是为了找出直接相关的资料。例如，用户可能需要收发某封重要的电子邮件，找一个距离最近的中国石油的加油站，看看CCTV5今天是否直播火箭队的比赛等等，恰巧手边又没有一台能上网的电脑。
同样，手机用户通常不太关心冗长的文件或内容。手机屏幕是不适合阅读长篇内容，用户往往还是因为没有更方便的接入方法，只得使用手机作为最后的手段。
2. 代码相关
xhtml mp使用:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//OMA//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>公交搜索</title>
</head>
<body>
</body>
</html>
xhtml basic使用：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>公交搜索</title>
</head>
<body>
</body>
</html>
2.2 去掉不必要的空格和换行
不必要的空格和换行会增大文件大小，去掉空格及换行对浏览器解析来说没有不好的影响，因此推荐在编写完成上传服务器时去掉不必要的内容。
2.3 尽量避免使用Cookie
不是所有的浏览其都支持Cookie，即使支持也不是所有的用户都开启了Cookie支持。我们可以在URL中传递相关信息，当然，要注意不要超过最大长度。如果使用Cookie也要保证是哪些非必要的功能在使用它。
2.4 不要使用<table>标签
<table>在小屏幕上表现不佳，解析难度较大，大多数手机浏览器对<table>都支持不佳。
2.5 图片或其它嵌入对象要添加必要属性
在使用图片或flash等元素时，要添加alt属性，以便在元素不能加载时给用户相应的提示，添加width，height属性，防止发生不可预期的版式破坏，添加id属性以替代name属性。
2.6避免使用绝对度量单位
推荐使用em，ex或者百分比等相对单位替代px，这样便于浏览器对网页的自动缩放。
2.7 把需要共享的样式和脚本通过外部链接引入
推荐把样式和脚本写在文件里通过外部链接引入，这样可以减少解析难度和出错几率。
如果客户端支持缓存就可以不再向服务器发送请求，如果不支持，那么每次都要从服务器取这个文件，不相关的内容也在这个文件里，将额外增加不必要的流量；网页里的每个外部链接都会单独从服务器请求一次，如果内容过于分散，请求次数就会很多。
因此，尽量把可以共享的样式或脚本写在单一的文件里，减少不必要的请求和流量。