要实现在不同高度设备上显示不同的启动画面，可以使用媒体查询和CSS来实现。

首先，在HTML文件中添加一个用于显示启动画面的div元素，如下所示：

然后，在CSS文件中，为不同高度的设备定义不同的启动画面样式，如下所示：

/* 默认启动画面样式 */
#startup-screen {
  background-image: url(default_startup_image.jpg);
  background-size: cover;
}

/* 高度小于600px的设备启动画面样式 */
@media (max-height: 600px) {
  #startup-screen {
    background-image: url(small_startup_image.jpg);
  }
}

/* 高度大于1200px的设备启动画面样式 */
@media (min-height: 1200px) {
  #startup-screen {
    background-image: url(large_startup_image.jpg);
  }
}

在上面的示例中，我们定义了三种不同高度设备的启动画面样式：默认样式、高度小于600px的设备样式和高度大于1200px的设备样式。根据设备的高度，媒体查询会选择对应的样式进行显示。

最后，使用JavaScript代码在页面加载完成后隐藏启动画面，如下所示：

window.addEventListener('load', function() {
  var startupScreen = document.getElementById('startup-screen');
  startupScreen.style.display = 'none';
});

这段代码会在页面加载完成后执行，将启动画面的display属性设置为none，从而隐藏启动画面。

这样，当页面在不同高度设备上加载时，会根据设备的高度显示对应的启动画面。