天天看点

《移动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所示)等。

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

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

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

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

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

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

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

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

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

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

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

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

本文仅用于学习和交流目的,不代表异步社区观点。非商业转载请注明作译者、出处,并保留本文的原始链接。

继续阅读