时间戳

首页 > 解决方案 > 16:9 宽高比应用程序和背景（考虑导航占用的空间）

javascript - 16:9 宽高比应用程序和背景（考虑导航占用的空间）

问题描述

好的，我正在为 IOS / Android 创建一个简单的游戏，但在跨设备布局的一致性方面遇到了一些麻烦。

我的新假设本质上是如果我以 16:9 的比例开发布局，它将适用于大多数/所有设备。我已经实现了保持游戏外包装的比例，但游戏区域也是 16:9 比例的背景图像，我无法正确缩小以填充“游戏区域”

为此，我们假设页面顶部有 30px，底部有 30px 用于导航，这意味着“游戏区域”的高度为 100% - 60px，宽度为 100%，这会导致问题。尽管背景图像的比例为 16:9，但该区域不再是 16:9 的画布区域。

我的尝试：

  1. 将图像更改为 60px -> 这非常失败
  2. 将背景图像居中在“游戏区域”上，这还不错，但我们会在侧面失去很多空间。背景 100% 的内部 DIV
  3. 使用画布强制图像进入该区域，但事情变得模糊：背景使用画布
  4. 将背景图像移动到外部包装器/主体。这实际上看起来相当不错！但是我丢失了 60px 的图像仍然被 NAV 覆盖。在这里看到：背景 100% 的包装是 16:9

关于如何获得更好结果的任何其他想法？

这是当前代码：

#Game_Wrapper {
    width: 100vw;
    height: calc(100vw * 9 / 16);
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
    padding: 0;
    border: 1px solid red;
    background: lightblue url('https://i.imgur.com/tRFltCI.png') 0 0/contain no-repeat;
}
#Game_Area {
    margin: 0;
	padding: 0;
    width: 100%;
    height: calc(100% - 60px);
}
#GUI_Top {
	margin: 0;
	padding: 0;
	height: 30px;
	background: grey;
}
#GUI_Top p {
    margin: 0;
    padding: 0;
    text-align: center;
}
#GUI_Bottom {
	margin: 0;
	padding: 0;
	height: 30px;
	background: grey;
}
#GUI_Bottom p {
    margin: 0;
    padding: 0;
    text-align: center;
}
/* 100 * 16/9 = 177.778 */
@media (min-width: 177.778vh) {
    #Game_Wrapper {
        height: 100vh;
        width: calc(100vh * 16 / 9);
    }
}
<meta charset="utf-8" name="viewport" content= "width=device-width, initial-scale=1.0">
<body>
	<div id="Game_Wrapper">
		<!-- This will hold the entire game and GUI -->
		<div id="GUI_Top">
			<!-- This is where the top GUI will be -->
            <p>This is the top GUI / NAV</p>
		</div>
		<div id="Game_Area">
			<!-- This is where you can interact with the actual game -->
		</div>
		<div id="GUI_Bottom">
			<!-- This is where the bottom GUI will be -->
			<p>This is the bottom GUI / NAV</p>
		</div>
	</div>
</body>

标签： javascripthtmlioscss

解决方案

正如您已经注意到的那样，不可能将图像的 16:9 比例保持在一个也是 16:9 并具有其他元素的容器中。

我的建议是用图像的扩展来填充剩余的空间，这样我们可能会认为它是同一个图像。

这是它应该看起来的近似值。我只是用相同的图像填充了空白空间，但模糊了。这个想法是找到好的模式，使其在视觉上更好：

#Game_Wrapper {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  border: 1px solid red;
}

#Game_Area {
  margin: 0;
  padding: 0;
  width: 100%;
  height: calc(100% - 60px);
  background: url('https://i.imgur.com/tRFltCI.png') center/contain no-repeat;
  position:relative;
  overflow:hidden;
}
#Game_Area:before {
  content:"";
  position:absolute;
  top:-10px;
  left:-10px;
  right:-10px;
  bottom:-10px;
  z-index:-1;
  background:  
    url('https://i.imgur.com/tRFltCI.png') right/contain no-repeat,
    url('https://i.imgur.com/tRFltCI.png') left/contain no-repeat;
 filter:blur(8px);
}


#GUI_Top {
  margin: 0;
  padding: 0;
  height: 30px;
  background: grey;
}

#GUI_Top p {
  margin: 0;
  padding: 0;
  text-align: center;
}

#GUI_Bottom {
  margin: 0;
  padding: 0;
  height: 30px;
  background: grey;
}

#GUI_Bottom p {
  margin: 0;
  padding: 0;
  text-align: center;
}


/* 100 * 16/9 = 177.778 */

@media (min-width: 177.778vh) {
  #Game_Wrapper {
    height: 100vh;
    width: calc(100vh * 16 / 9);
  }
}
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">

<body>
  <div id="Game_Wrapper">
    <!-- This will hold the entire game and GUI -->
    <div id="GUI_Top">
      <!-- This is where the top GUI will be -->
      <p>This is the top GUI / NAV</p>
    </div>
    <div id="Game_Area">
      <!-- This is where you can interact with the actual game -->
    </div>
    <div id="GUI_Bottom">
      <!-- This is where the bottom GUI will be -->
      <p>This is the bottom GUI / NAV</p>
    </div>
  </div>
</body>

推荐阅读