需要使用media query作个别设备的适配时。例如对于iPhone X，设备的高度（css px单位）为812

通常在前端开发时，这样写就可以

@media screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

}

但在小程序开发时，在*.wxss中按上述写法，在小程序真机上可以work，在工具上不work

如果把上述代码中的device-height: 812px 改为 device-height: 724px，这时工具上反而可以work，小程序真机则不work

因为724px是从小程序的标题栏下边缘开始到屏幕底部的长度，也就是viewport的高度

猜测这里是不是小程序开发工具的media-query的device-height的取值实现有问题。

（代码片段中有两个方形，两个方形各自使用device-height为812px和724px赋予了一段样式。如果这个bug存在，那么预期结果是：小程序真机(iPhone X手机)上，左边的方形出现红色下划线；开发者工具（选择模拟设备为iPhone X）上，右边的方形出现红色下划线

--------------------

更新一下我们实际开发的app中遇到的情况。需要适配的是，当手机为iPhone X时，为购买按钮下方增加一些空白以留出触控条

1. 当wxss代码为如下（device-height取812）时

@media screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

}

小程序真机和工具的表现如下：（小程序真机中样式生效，工具中样式不生效）