带有桌面站点视图的移动设备上元素的绝对高度和宽度为100％

Question

是否有一种方法可以设置一个绝对定位的元素，使其在启用了桌面站点视图的移动浏览器中覆盖整个屏幕？

我的应用程序由一些绝对定位的元素组成，这些元素覆盖了整个屏幕（宽度-100％，高度100％），因此我可以通过简单地滑动一个和一个就可以改变它们。它在台式机和移动设备上都可以完美运行浏览器，但是当我在移动设备上启用桌面站点视图时，主体元素仍然覆盖整个屏幕，而绝对元素要小得多。看起来像这样

我在移动chrome浏览器上进行了测试，并且我在此页面上使用类似的CSS规则：https://tympanus.net/Development/PageTransitions/，它也存在相同的问题。

是否有可能真的将其宽高100％？

Answer 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>

带有桌面站点视图的移动设备上元素的绝对高度和宽度为100％

问题描述投票：0回答：1

1个回答

最新问题

带有桌面站点视图的移动设备上元素的绝对高度和宽度为100％

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1