具有桌面站点视图的移动设备上的绝对元素高度和宽度 100%答案

【问题标题】：Absolute element height and width 100% on mobile with desktop site view具有桌面站点视图的移动设备上的绝对元素高度和宽度 100%
【发布时间】：2020-04-30 15:25:52
【问题描述】：

有没有办法在启用了桌面站点视图的移动浏览器上设置绝对定位元素以覆盖整个屏幕？

我的应用程序包含一些覆盖整个屏幕的绝对定位元素（宽度 - 100% 和高度 100%），因此我可以通过简单地滑出和滑入来更改它们。它在桌面和桌面上都非常好移动浏览器，但是当我在移动设备上启用桌面站点视图时，主体元素仍然覆盖整个屏幕，而绝对元素要小得多。看起来是这样的

我在移动 chrome 浏览器上对其进行了测试，我正在使用与此页面类似的 css 规则：https://tympanus.net/Development/PageTransitions/，它也有同样的问题。

真的可以做到 100% 宽高吗？

这是显示我的问题的最简单的 html

<html>
<head>
	<style>
		body,html {
		margin: 0;
		padding: 0;
		height: 100vh;
		width:100vw;
		}
		body {
			background-color: #AAA;
		}
		.phaseScreen{	
			width:100vw;
			height:100vh;
			position: absolute;
			left: 100%;
			background-color: #000;
		}

	</style>
</head>
<body>
	<div class='phaseScreen'>
	</div>
</body>
</html>

我的 chrome 手机上的结果看起来像这样

【问题讨论】：

提供代码，没有它我们不知道会发生什么
也许我误解了你的问题，但你是否尝试过 100vh 和 100vw 而不是百分比？

标签： html css mobile height desktop

【解决方案1】：

这是你要找的吗？

$("#trigger").click(function() {
  if (!$("#slide").hasClass("slide-in")) {
    $("#slide").addClass("slide-in");
  } else {
    $("#slide").removeClass("slide-in");
  }
});

body {
  height: 100%;
  width: 100%;
  background: #1a1a1a;
  margin: 0;
}

#slide {
  position: absolute;
  height: 100%;
  width: 100%;
  background: tomato;
  color: #fff;
  left: -100%;
  transition: .2s left ease-in-out;
}

.slide-in {
  left: 0 !important;
}

#trigger {
  position: absolute;
  top: 50px;
  right: 10px;
  background: yellow;
  padding: .5rem;
  z-index: 100;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id="slide">
    <h1>Hello this is a headline</h1>
    <p>This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. </p>
  </div>
  <div id="trigger">click me</div>
</body>

【讨论】：