带有桌面站点视图的移动设备上元素的绝对高度和宽度为100％
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了带有桌面站点视图的移动设备上元素的绝对高度和宽度为100％相关的知识，希望对你有一定的参考价值。
是否有一种方法可以设置一个绝对定位的元素，使其在启用了桌面站点视图的移动浏览器中覆盖整个屏幕？
我的应用程序由一些绝对定位的元素组成，这些元素覆盖了整个屏幕（宽度-100％，高度100％），因此我可以通过简单地滑动一个和一个就可以改变它们。它在台式机和移动设备上都可以完美运行浏览器，但是当我在移动设备上启用桌面站点视图时，主体元素仍然覆盖整个屏幕，而绝对元素要小得多。看起来像这样
我在移动chrome浏览器上进行了测试，并且我在此页面上使用类似的CSS规则：https://tympanus.net/Development/PageTransitions/，它也存在相同的问题。
是否有可能真的将其宽高100％？
答案
这是您要寻找的吗？
$("#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％的主要内容，如果未能解决你的问题，请参考以下文章