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 机型稍少,可以模拟手机操作

paip.提升用户体验---网站程序HTML,JS需要注意的地方相关推荐

  1. paip.提升用户体验--提升java的热部署热更新能力

    paip.提升用户体验--提升java的热部署热更新能力 想让java做到php那么好的热部署能力  "fix online"/在线修复吗??直接在服务器上修改源码生效,无需重启应 ...

  2. 网站优化提升用户体验的三个关键要点

    众说周知,在我们优化网站的过程中用户体验这个环节至关紧要,而百度早已公开告知站长,近期调整的一系列算法都是以用户体验为目的.如果我们在用户体验的某些细节操作不当将会给网站带来很大的降权风险,但笔者认为 ...

  3. 描点链接元素的优化提升用户体验

    用一些大网站的时候,发现有一个很细节的共同点:点击链接元素的时候,链接元素会产生一个明显的边框,而且这个边框的颜色和#f27b04很接近,我觉得既然很多大网站都这么做,这其中肯定有一些用户体验方面的东 ...

  4. 网络营销外包——网络营销外包专员浅析提升用户体验从哪入手?

    众所周知,在网站运营期间,网站跳出率的高低直接反映出用户对网站喜爱与否,也是检测网站性能是否丝滑的关键点,如果网站跳出率越高就证明用户体验越差,搜索引擎也不会更加注重抓取该网站.那么如果提高用户体验, ...

  5. 纯前端表格控件SpreadJS V12.1 隆重登场,专注易用性,提升用户体验

    ​ 一款优秀的开发工具,在更新迭代中,除了要满足不同场景的业务需求,也需不断优化已有功能,尤其是细节方面,要能为用户带来使用体验和开发效率的提升. 作为一款备受业界专家和开发者认可的纯前端类Excel ...

  6. 使用渐进式JPEG来提升用户体验

    今天才认识到原来JPEG文件有两种保存方式他们分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式).两种格式有相同尺寸以及图像数据,他们的扩展名也是相同的,唯一的区别 ...

  7. android 6.0适应的机型,提升用户体验 可升Android 6.0机型盘点

    原标题:提升用户体验 可升Android 6.0机型盘点 [手机中国 导购]2009年Android系统正式发布,由此加速手机走向智能化进度.如今,随着Android系统日渐成熟,众多手机厂商都在此基 ...

  8. electron加载html加载不起来,Electron 预加载远程页面提升用户体验

    使用场景 Electron 内置 Chromium 和 Node.js,为了提升用户体验,通常 Electron 封装的前端静态文件存储在客户端本地.但总有一些特殊情况,会使用到部分远程页面. 比如微 ...

  9. APP开发中这十个细节能直接影响到用户体验,那么如何提升用户体验?

    随着软件开发技术的不断发展和完善,有众多同类选择的APP用户越来越挑剔,单单拼功能拼硬件已经不足以捕获用户芳心.在APP使用过程中,大部分用户无意识地培养出了对使用体验的重视感.这警醒企业,只盯着为用 ...

  10. 三星电子中国研究院院长张代君:Bixby绝非炫技而是为提升用户体验而生

    近日,三星正式对外发布旗下人工智能平台Bixby中文(普通话)版.与其他语音助手截然不同,Bixby包含语音.视觉.主页.提醒四大功能,可为用户提供多模交互体验.此外,Bixby还可以不断学习用户的使 ...

最新文章

  1. php url模式在哪修改,php如何修改url
  2. iOS进程间通信之CFMessagePort
  3. android 盒子 airplay,iOS Airplay--Airtunes音乐播放在Android盒子和手机上的实现 (第一篇)...
  4. 树的广度优先搜索(BFS),深度优先搜索(DFS)
  5. [转]关于父亲的故事
  6. 微信小程序云开发 mysql_微信小程序云开发学习笔记(一)云数据库
  7. 个人随笔-《江城子·驻西航》
  8. 一根绳子从一头烧需30时分钟_小学生一分钟跳绳满分训练指南
  9. 回溯---含有相同元素求子集
  10. 地铁线路项目-结对编程
  11. VB.net调用蒙恬Write2Go笔迹手写板进行电子签名
  12. 树莓派自带wifi工作不正常
  13. [受限玻尔兹曼机] 原理、求解过程推导、深度信念网络
  14. 定期存款的转存临界点计算公式
  15. java socket 长连接事例
  16. uIP中文协议文档:Ch01
  17. 电脑重装系统Win10“initpki.dll”加载失败怎么办?
  18. 大学四年自学进BAT,私下存的资源/工具/网站我全贡献出来了
  19. java---JUC并发包详解
  20. panda 满足条件的行 index_濮阳市油田十八中:“懂礼仪,行孝道”重阳经典诵读比赛圆满落幕 - 濮阳之窗...

热门文章

  1. jdk和tomcat环境变量批处理(.bat)
  2. java静态成员静态代码块初始化顺序
  3. 【通信基础知识】白噪声、相关解调和相干解调
  4. BZOJ3728 PA2014Final Zarowki
  5. 如何设计一个完美的权限管理模块
  6. Go语言中的单引号、双引号、反引号
  7. 去除ios手机端input输入框上方有阴影
  8. centos配置虚拟主机
  9. Android webview上传图片(适配3.0,4.0,5.0,6.0)
  10. multiple build commands for output file