手机浏览器兼容性测试结果概要

简介:

a.在 iOS 中,用户手动开启「首字母自动大写」功能

可以通过在表单元素上可以通过设置autocapitalize="off"来关闭。

<input type="text" autocapitalize="off" placeholder="用户名-关闭首字母大写">

还可以在form元素上设置该属性,让里面的每个元素都继承autocapitalize的设置。

b.




以下所说的大多数是指在我们测试过的机型中,发生此类状况的手机占比达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 MobileProfile规范(WAP-277-XHTMLMP-20011029-a.pdf),简称为XHTML MP,也就是通常说的WAP2.0规范。 XHTMLMP 是为不支持XHTML的全部特性且资源有限的客户端所设计的。它以XHTML Basic为基础,加入了一些来自XHTML1.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或称 WAPCSS)是移动版本的CSS样式表。它是CSS2的一个子集,去掉了一些不适于移动互联网特性的属性,并加入一些具有WAP特性的扩展(如-wap-input-format/-wap-input-required/display:-wap-marquee等)。需要留意的是,这些特殊的属性扩展并不是很实用,所以在实际的项目开发当中,不推荐使用WCSS特有的属性。

  • 避免空值属性
    如果属性值为空,在web页面中是完全没有问题的,但是在大部分手机网页上会报错。

  • 网页大小限制
    建议低版本页面不超过15k,高版本页面不超过60k。

  • 用手机模拟器和第三方手机浏览器的在线模拟器来测试页面是不是靠谱?
    有条件的话,我们当然建议在手机实体上进行测试,因为目标客户群的手机设备总是在不断变化的,这些手机模拟器通常不能完全正确的模拟页面在手机上的显示情况,比如图片色彩,页面大小限制等就很难再模拟器上测试出来。当然,一些第三方手机浏览器的在线模拟器还是可以进行测试的,第三方浏览器相对来说受手机设备的影响较小。        手机网页制作参考资料:http://dreamweaver.abang.com/od/html/a/wap-web.htmm






      本文转自Ansue  51CTO博客,原文链接:http://blog.51cto.com/ansue/1629742,如需转载请自行联系原作者




相关文章
|
3月前
|
Java
【Java每日一题】— —第二十一题:编程把现实生活的手机事物映射成一个标准类Phone,并定义一个测试类PhoneDemo测试Phone类的功能
【Java每日一题】— —第二十一题:编程把现实生活的手机事物映射成一个标准类Phone,并定义一个测试类PhoneDemo测试Phone类的功能
63 0
|
3月前
|
监控 安全 Android开发
【新手必读】Airtest测试Android手机常见的设置问题
【新手必读】Airtest测试Android手机常见的设置问题
151 0
|
3月前
|
Web App开发 Java 测试技术
《手把手教你》系列基础篇之(四)-java+ selenium自动化测试- 启动三大浏览器(下)基于Maven(详细教程)
【2月更文挑战第13天】《手把手教你》系列基础篇之(四)-java+ selenium自动化测试- 启动三大浏览器(下)基于Maven(详细教程) 上一篇文章,宏哥已经在搭建的java项目环境中实践了,今天就在基于maven项目的环境中给小伙伴们 或者童鞋们演示一下。
98 1
|
3月前
|
Web App开发 Java 测试技术
《手把手教你》系列基础篇之(三)-java+ selenium自动化测试- 启动三大浏览器(上)(详细教程)
【2月更文挑战第12天】《手把手教你》系列基础篇之(三)-java+ selenium自动化测试- 启动三大浏览器(上)(详细教程) 前边宏哥已经将环境搭建好了,今天就在Java项目搭建环境中简单地实践一下: 启动三大浏览器。按市场份额来说,全球前三大浏览器是:IE.Firefox.Chrome。因此宏哥这里主要介绍一下如何启动这三大浏览器即可,其他浏览器类似的方法,照猫画虎就可以了。
81 1
|
3月前
|
机器人 Java 测试技术
【软件测试概要】
【软件测试概要】
|
1月前
|
Web App开发 XML Java
《手把手教你》系列基础篇(九十六)-java+ selenium自动化测试-框架之设计篇-跨浏览器(详解教程)
【7月更文挑战第14天】这篇教程介绍了如何使用Java和Selenium构建一个支持跨浏览器测试的自动化测试框架。设计的核心是通过读取配置文件来切换不同浏览器执行测试用例。配置文件中定义了浏览器类型(如Firefox、Chrome)和测试服务器的URL。代码包括一个`BrowserEngine`类,它初始化配置数据,根据配置启动指定的浏览器,并提供关闭浏览器的方法。测试脚本`TestLaunchBrowser`使用`BrowserEngine`来启动浏览器并执行测试。整个框架允许在不同浏览器上运行相同的测试,以确保兼容性和一致性。
47 3
|
21天前
|
存储 域名解析 缓存
函数计算产品使用问题之怎么使用浏览器测试函数
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
2月前
|
Web App开发 IDE Java
自动化测试谷歌浏览器和其驱动版本差不多却还是报错The chromedriver version (121.0.6167.184) detected in PATH at DPythonchromed
自动化测试谷歌浏览器和其驱动版本差不多却还是报错The chromedriver version (121.0.6167.184) detected in PATH at DPythonchromed
87 2
|
2月前
|
Web App开发 XML 安全
《手把手教你》系列基础篇(七十三)-java+ selenium自动化测试-框架设计基础-TestNG实现启动不同浏览器(详解教程)
【6月更文挑战第14天】本文介绍了如何使用TestNg进行自动化测试,特别是通过变量参数启动不同浏览器的步骤。
31 5
|
3月前
|
编解码 测试技术 API
模拟手机设备:使用 Playwright 实现移动端自动化测试
本文介绍了使用Python的Playwright库进行移动设备模拟和自动化测试的方法。通过Playwright,开发者能模拟不同设备的硬件和软件特性,如屏幕尺寸、用户代理,以确保网站在移动设备上的表现。示例代码展示了如何模拟iPhone X并访问网站,之后可在此基础上编写测试代码以检验响应式布局和交互功能。Playwright的设备参数注册表支持多种设备,简化了移动端自动化测试的流程。
183 1

热门文章

最新文章