背景
在测试过程中,在iPhone x系列手机上h5经常出现兼容性问题。但是测试过程中iPhone x系列手机比较少,公司大量测试争用1台iPhone x设备。面对众多使用h5进行开发的页面,iPhone x系列手机兼容性又必须做。面对这一窘境,本文提出使用Chrome模拟iPhone x系列手机进行h5兼容性测试。
原理
H5页面使用CSS进行页面渲染,在研究我们如何进行iPhone x系列手机兼容时,发现使用的css如下所示:
@charset "UTF-8";@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) and (orientation:portrait) {
.fixed-bottom-bar {
bottom:34px!important
}
}
@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:2) and (orientation:portrait) {
.fixed-bottom-bar {
bottom:34px!important
}
}
@media only screen and (device-width: 414px) and (device-height:896px) and (-webkit-device-pixel-ratio:3) and (orientation:portrait) {
.fixed-bottom-bar {
bottom:34px!important
}
}
@media only screen and (device-width: 414px) and (device-height:896px) and (-webkit-device-pixel-ratio:2) and (orientation:portrait) {
.fixed-bottom-bar {
bottom:34px!important
}
}
根据上述css,可以通过Chrome来模拟h5测试。
实施步骤
1、安装Chrome浏览器后,打开H5页面(以知乎h5为例演示)。按F12打开开发工具。
2、点击开发工具左上角的手机图标,可以模拟手机中h5展示效果。
3、点击下图中的Edit,添加设备
4、点击Add Custom Device,添加设备
5、添加名为iPhone XR的设备,设备配置如下:
其中User agent string如下:
Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1
6、同步骤5,添加iPhone xs、iPhone xs max设备,分别如下
7、下一步便可愉快的模拟iPhone x系列手机进行H5兼容性测试了。
参考资料
1、iPhone x系列手机屏幕分辨率、竖屏点。