《移动App测试的22条军规》——第5章,第5.2节WebView的测试-阿里云开发者社区

开发者社区> 开发与运维> 正文

《移动App测试的22条军规》——第5章,第5.2节WebView的测试

简介:

本节书摘来自异步社区《移动App测试的22条军规》一书中的第5章,第5.2节WebView的测试,作者 黄勇,更多章节内容可以访问云栖社区“异步社区”公众号查看

5.2 WebView的测试
移动App测试的22条军规
对于WebView的显示,除了需要关注它对于横竖屏的影响,还需要关注它在不同设备上的显示。因为不同设备会有不同的屏幕宽度和高度,所以WebView的显示效果通常也是千差万别的。比如显示宽度过宽(如图5.7所示),显示宽度过窄(如图5.8所示),或者显示位置太靠下从而导致页面出现很大的空白(如图5.9所示)等。


2201da475b145c40048f55d21f6e4c5b537fb726


457073701fc0b0d63c53983f8bc64742ca5ef129

如果是具有特定格式的WebView,在不同设备上的显示效果很可能差异更大,例如图5.10所示表格的显示差异。


195eb6a966f4674264e9269a3b8de348120e53ef

在手机App中嵌入的WebView显示样式和在Web上是不一样的

如果在嵌入WebView的页面输入文本,可能会出现更多的问题,如图5.11所示。


7bb40e063e7f6dd53e5023458ef4d0edc2ce83e9

在嵌入的WebView中点击Google搜索栏输入的时候,页面显示会出现问题

通常,开发移动App时想要在App里嵌入WebView,都是基于已经有了产品的Web版本。如果构建移动App的时候能使用已有的功能和资源,会节约开发的成本,降低开发难度。

是的,理论上是这样没错,但是如果在Web端没有做到响应式设计“Responsive Design”(如图5.12所示),在设计Web架构的时候没有考虑到Web端和移动App端功能以及特性的不同,就会造成在桌面端显示正常的Web页面被嵌入移动App之后会出现很多诸如前述的样式显示的问题。


ea9bce39ea6fcc615ff353e81da8f740c19b195d

响应式设计“Responsive Design”的理念是集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局

所以最好不要在移动App中嵌入WebView,而是通过服务器返回信息,由原生代码控制显示的样式,这样可以更好地使用操作系统的特性来避免显示问题。

但是如果想使用WebView的优势,也就是在不改变客户端代码的情况下实现功能和样式的更新时,就要尽量保证在Web端和移动App端都能实现响应式设计(如图5.13所示为iPhone上的App Store从iOS 6升级到iOS 7时的变化)。


804ad8b7ac7993b5129fc84d8ece044456c37f38

App Store使用的就是WebView,所以即使设备没有从iOS 6升级到iOS 7,
也可以体验到新版的App Store

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章