问题
在测试安卓APP中的H5的时候发现部分UI展示异常
例如该按钮的内容在IOS上正常,但是在安卓上却显示异常
![异常 73305ceef1d76e4a079b7aa0565d8a77.png](https://i-blog.csdnimg.cn/blog_migrate/84be77b1700500d66980796d59d68b28.jpeg)
但是拷贝当前H5地址到安卓的浏览器上查看却是正常的
那是因为APP中内置的WebView
与浏览器的WebView
版本是不一样的
所以我们需要在对应WebView
下进行调试查看
调试基于WebView的Hybrid App最舒服的工具当然是Chrome自带的开发者工具,其中有我们熟悉的Dom树调试,JS调试,Network监视等等功能。
环境搭建
开启手机上的USB调试功能
打开Chrome浏览器,地址栏输入:Chrome://inspect,回车
Chrome会自动检测手机上打开的App,并列出可调试的WebView页面,如图:
![页面 dcd1158a379f34c56c0d23a86b5b58bb.png](https://i-blog.csdnimg.cn/blog_migrate/caa515fa4357514253d845248644b3cf.jpeg)
点击inspect
就会弹出一个新的窗口
![测试H5 cf4f8d6f567374f4f7af8f5cb32f8067.png](https://i-blog.csdnimg.cn/blog_migrate/ff3b88679c45c769f3faeb9e02814649.jpeg)
注意:因为需要下载
WebView
所以需要翻墙
![调试 eaa0552631653bc4a0bc5da122f66e4c.png](https://i-blog.csdnimg.cn/blog_migrate/af5feb3b515190f595aa3282d04f226a.jpeg)
这时我们就可以看到文字偏上是因为没有上下居中
![span修改前 05b56f58281954e03258e3b6850b0dae.png](https://i-blog.csdnimg.cn/blog_migrate/5a5f30d964040903fd132ce3b8bd48bd.jpeg)
添加
line-height: normal
后内容就居中对齐了
![修改后 e58a6883b844f9531cda79fc91ea8648.png](https://i-blog.csdnimg.cn/blog_migrate/732053c2b93d964a990a582c6ca3d248.jpeg)
小结
使用该方法可以调试小程序中嵌入H5、APP中嵌入H5的各种场景