在上次阿尔卡特OT800（淘宝手机“无双”）的WEB兼容性测试后，本次带来的是针对Lenovo：Miro I61，也就是“灵素”的兼容性测试记录。另外，想知道这两款手机的更多信息，欢迎访问淘宝手机官方旗舰店进行更细致的了解。
注意：对于本兼容性测试系列，原始测试数据将不会悉数列出，文章中只会标明需要注意的测试点（兼容性有问题或需要注意的 地方）以提供设计的参考依据。另外，这里只会针对手机内置浏览器进行测试，其它第三方浏览器（Opera Mini、UCWEB、QQ浏览器等，包括OEM版本）将不在此范围内。
[兼容性测试]Lenovo：Miro i61
（照片照得有点骚瑞，需要无码清晰大图请移步淘宝手机官方旗舰店）
基本参数信息
- 上市时间：2009
- 屏幕尺寸：3.2 英寸
- 分辨率：240×400 像素
- 颜色：26万
- 操作系统：非智能机
- 平台：MTK
- 更多参数信息
设备特色
- 触摸屏+软键盘
- 支持720p
- 屏幕左侧带有翻页键，浏览网页时可以移动焦点
- 内置UCWEB浏览器OEM版（不在本次测试范围之内）
- 内置淘宝客户端（手机旺旺、随身购、淘掌柜、支付宝、数字商店、手机彩票等，见官网）
浏览器特色
- 无太多特色
- 有标题栏，但不支持favicon
- 无指针，焦点获取式浏览
- 支持缓存
- 浏览选项非常少，只有“等待时间”和“显示图片”设置
网页兼容性测试结果
- 默认行高在1.5em左右
- 不支持disabled属性
- 不支持button元素
- 不支持input[type=file]上传组件
- 表单控件偏大，尤其是checkbox和radio
- 下拉菜单默认显示所有选项，占非常多空间
- 不支持iframe
- 不支持超链接悬停样式（无指针浏览器普遍不支持）
- 不支持字体设置
- 不支持font-variant
- 不支持line-height
- 不支持letter-spacing和word-spacing
- 不支持background缩写和background-position（支持background-color）
- 不支持position
- 不支持height
- 不支持overflow
- 不支持所有JavaScript
- 超大图片无法加载
- 页面超过20K提示内存不足，无法加载
- 额外注意：select控件遇到CSS的vertical-align时，可能会导致select大幅度浮动，并可能会覆盖其他元素
部分实际效果图
测试结果总结
问题比例（出问题的测试点占所有测试点的比例）：33%左右
一直不对MTK系统的内置浏览器报有很高期望，这款机型也是如此。XHTML中一些组件的不支持、CSS布局属性的不支持以及JS的全体不支持，会给设计留下很多的陷阱和麻烦。如果需要在这台机器上使用较复杂的布局元素和JS交互效果，要记得做好优雅降级工作。
对于网页设计来说，想伺候好这款浏览器需要重点考虑以下几点：
- 设计表单时要非常谨慎
- 体型都很大！
- 尤其是checkbox和radio，要注意他们接近2倍文本的体积
- 上传组件和高级按钮要杜绝使用
- 下拉菜单要特别加以小心，很占空间
- 不要在表单上用disabled属性，如果某个条件下某控件不可用，那么就不要让他显示出来
- 用背景色代替背景图片，注意优雅降级
- 尽量使用流体布局，别定高，别用高级CSS布局技巧
- 别指望JavaScript实现交互
- 设计CSS Reset时，注意vertical-align的应用范围，避免应用到select上
- 注意设备自身障碍，控制图片大小、页面大小，这点非常重要
在对Mobile WEB标准支持能力不好的设备（客户端）上，优雅降级是非常重要的方法。你要时刻保持警觉，在某些细节根本表现不出来的情况下，你的页面会不会有其它的替代方案？如果没有的话，会不会影响功能的正常使用？在自身技术领域内，保证功能的正常使用是Mobile WEB前端开发的最低限度，如果因为XHTML/CSS/JS的设计失误而导致功能不可用，那么你不得不考虑换一个思路了，一般来说，总有一套方案是可以解决这些问题的。
OK，以上就是本次测试的全部内容。[兼容性测试]系列文章将会继续不定期更新，欢迎关注，同时欢迎留下宝贵建议：）
写个评论