Chrome模拟iPhone x系列手机进行H5兼容性测试

背景

在测试过程中，在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打开开发工具。

image

2、点击开发工具左上角的手机图标，可以模拟手机中h5展示效果。

image

3、点击下图中的Edit，添加设备

image

4、点击Add Custom Device，添加设备

image

5、添加名为iPhone XR的设备，设备配置如下：

image

其中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设备，分别如下

image image

7、下一步便可愉快的模拟iPhone x系列手机进行H5兼容性测试了。

参考资料

1、iPhone x系列手机屏幕分辨率、竖屏点。

image