我正在开发一个在移动设备上也应该看起来不错的网络应用程序。我有一张背景图片，想在上面放置一个元素。背景图像为 16:9，并且始终采用全尺寸（使用 background-size: contains）。
无论是横向还是纵向，元素都应正确定位在背景图像上。
在我的CSS中，我有这个公式：
translateX(max(-14.5vw, -25.78vh))
公式是因为 16:9 的图片在纵向模式下是全宽的，而在横向模式下则是全高。
在纵向模式下，我将元素移动 -14.5vw。所以在横向模式下，我需要将它移动-14.5vh * 16/9 = -25.78vh，使元素在背景图片上相对位于同一位置。这就是公式的工作原理。
问题是，当我在真实手机上以横向模式打开页面时，视觉视口高度会降低，我认为是由于浏览器的导航按钮。因此，图像既不占用完整的视口宽度，也不占用完整的视口高度。
然后我的元素在 x 轴上移动得太远。
如何解决？