paip.提升用户体验---网站程序HTML,JS需要注意的地方
paip.提升用户体验---网站程序HTML,JS需要注意的地方
作者Attilax ， 1466519819@qq.com
以下是我用oprea mobile v11.0测试的.......
电脑模拟Opera手机版(Opera Mobile Emulator) 12
1.文本框不要加一些特殊的属性及事件
否则手机浏览器无法进行输入
比如οnkeydοwn="return keyListener(event);"
解决方法,可以在JS里设置事件..
2.CSS的DISPAY性能MS对手机不起作用.
3.文本框的隐藏与显示
普通的DISPLAY不起作用..只好用size="1"这个属性将就一下,.. SIZE1缩小文本框的体积,SIZE=0不起效果,无法完全实现隐藏..
参考:手机浏览器兼容性测试结果概要 - cjxixi - ITeye技术网站.htm
里面对手机的HTML,CSS,JS支持情况都做了详细的说明 ..
编写兼容UCWEB的手机HTML页面_qkyh1225的空间_百度空间.htm
编写兼容UCWEB的手机HTML页面2011-12-01 20:39兼容UCWEB的HTML页面是一个很纠结的事情，UCWEB并不支持全部的HTML、css属性
，并且完全屏蔽JS。
要做具备UCWEB兼容性的HTML，需要做到以下几条：
1、遇到图文混排结构时，用TABLE
2、不用padding margin
3、不用background：url属性添加背景图，但可添加背景色
4、涉及图片的地方用img
5、不设置字体、字号
6、hr表现为一条虚线
7. 不能定义button的样式，只能用image类型的input代替
8. 只有li标签支持float属性，为了兼容性也建议慎用
9. input输入框无论怎样都独占一行
10. 别改变body的背景色，会出问题
11. javascript完全不支持
from:地址：http://www.alexblair.org/user-alexblair-post-1050.html
来自：aの碎碎念
手机浏览器兼容性测试结果概要
博客分类： 测试知识
浏览器WAPMobileCSSXHTML
注意： 以下所说的“大多数”是指在我们测试过的机型中，发生此类状况的手机占比达50%及以上，“部分”为 20%到50%；“少数”为20%及以下
。而这个概率也仅仅只限于我们所测试过的机型，虽然我们采集的样本尽量覆盖各种特征的手机，但并不代表所有手机的 情况。
XHTML部分
大多数手机不支持的：
表单元素的“disable”属性
部分手机不支持的：
“button”标签
“input[type=file]“标签
“iframe”标签。
虽然只有部分 手机不支持这几个标签，但因为这些标签在页面中往往具有非常重要的功能，所以属于高危标签，要谨慎使用。
少数手机不支持的：
“select”标签：该标签如果被赋予比较复杂的CSS属性，可能会导致显示不正常，比如”vertical-align:middle”。
CSS部分
大 部分手机不支持的：
“font-family”属性：因为手机基本上只安装了宋体这一种中文字体；
“font-family:bold;”：对中文字符无效，但一般对英文字符是有效的；
“font-style: italic;”：同上；
“font-size”属性：比如12px的中文和14px的中文看起来一样大，当字符大小为18px的时候你也许能看出来一些区别；
“white-space/word-wrap”属性：无法设置强制换行，所以当你网页有很多中文的时候，需要特别关注不要让过多连写的英文字符 撑开页面；
“background-position”属性：但背景图片的其他属性设定是支持的；
“position”属性；
“overflow”属性；
“display”属性；
“min-height”和”min-weidth”属性；
部分手机不支持的：
“height”属性：对”height”的支持不太好，奇怪的是在我们的测试当中，仅仅只有很少部分手机不支持”width”属性；
“pading”属性
“margin”属性：更高比例的手机不支持”margin”的负值。
少数手机不支持的：
少数手机对CSS完全不支持；
JavaScript部分
这部分测试相对不那么让人抓狂，要么干脆不支持，如果支持的话，对基本的dom操作、事 件等支持度都还不错。但我们没有测试过很复杂的脚
本。
在我们测试过的手机当中，支持（包括不完全支持）JavaScript的手机比例大约在 一半左右，当然，对于我们来说，最重要的不是这个比例，而
是要如何做好JavaScript的优雅降级。
其他
部分手机不支持png8和png24，所以尽量使用jpg和gif的图片
另外对于平滑的渐变等精细的图片细节，部分手机的色彩支持度并不能达到要求，所以慎用有平滑渐变的bar设计
部分手机对于超大图片，既不进行缩放，也不显示横下滚动条
少数手机在打开超过20k的测试页面时，会显示内存不足
开发中你需要注意的问题
手机网页编码需要遵循什么规范？
遵循XHTML Mobile Profile规范（WAP-277-XHTMLMP-20011029-a.pdf ）， 简称为XHTML MP，也就是通常说的WAP2.0规范。 XHTML MP
是为不支持XHTML的全部特性且资源有限的客户端所设计的。它以XHTML Basic为基础，加入了一些来自XHTML 1.0的元素和属性。这些内容包
括一些其他元素和对内部样式表的支持。和XHTML Basic相同，XHTML MP是严格的XHTML 1.0子集。
网页文档推荐使用扩展名？
推荐命名为xhtml，按WAP2.0的规范标准写成html/htm等也是可以的。但少数手机对html支持的不好。
为什么现今大多数的网站一行字数上限为14个中文字符？
由于手持设备的特殊性，其页面中实际文字大小未必是我们在CSS中设定的文字大小，尤其是在第三方浏览器中。例如Nokia5310，其内置浏览
器 页面内文字大小与CSS设定相符，但是第三方浏览器OperaMini与UCWEB页面内文字大小却大于CSS设定。经测试，其文本大概在16px左右
。 假如屏幕分辨率宽度为240px，去除外边距，那么其一行显示14个字以内，是比较保险（避免文本换行）的做法。
使用WCSS还是CSS？
WCSS (WAP Cascading Style Sheet 或称 WAP CSS)是移动版本的CSS样式表。它是CSS2的一个子集，去掉了一些不适于移动互联网特性的
属性，并加入一些具有WAP特性的扩展（如-wap- input-format/-wap-input-required/display:-wap-marquee等）。 需要留意的是，这些特
殊的属性扩展并不是很实用，所以在实际的项目开发当中，不推荐使用WCSS特有的属性。
避免空值属性
如果属性值为空，在web页面中是完全没有问题的，但是在大部分手机网页上会报错。
网页大小限制
建议低版本页面不超过15k，高版本页面不超过60k。
用手机模拟器和第三方手机浏览器的在线模拟器来测试页面是不是靠谱？
有条件的话，我们当然建议在手机实体上进行测试，因为目标客户群的手机设备总是在不断变化的，这些手机模拟器通常不能完全正确的模拟页
面在手机上的显示情 况，比如图片色彩，页面大小限制等就很难再模拟器上测试出来。当然，一些第三方手机浏览器的在线模拟器还是可以进行
测试的，第三方浏览器相对来说受手机设 备的影响较小。
推荐参考资料
开发权威网站
WAPForum：XHTML Mobile Profile规范.pdf
WAPForum：WCSS 规范.pdf
W3C：XHTML Basic 1.1规范.html
W3C：Mobile Web Test Suites Working Group.html
PPK：关于手机浏览器兼容性的测试和研究.html
Developershome：XHTML MP 教程.html （汉化版 ）
经典开发文章
Unknown： 移动WAP相关标记语言的演进.jpg
Flora Graham：Alternative mobile browsers tested.html
Lucas Pettinati(Yahoo)：Challenges of Interface Design for Mobile Devices.html
Holly Kolman：How to Make a Click to Call Link.html
Brian Suda：Introduction to the Mobile Web.html
手机型号查询
handsetdetection： 手机查询.html 机型很全，偏国外机型，参数较多
mobile9：手机查询.html 机型较全，偏门机型可能无内容
试手机网：手机查询+模拟.html 机型稍少，可以模拟手机操作
