Абсолютная высота и ширина элемента 100% на мобильном телефоне с видом на рабочий стол - PullRequest
Новая
       25

Абсолютная высота и ширина элемента 100% на мобильном телефоне с видом на рабочий стол

0 голосов
/ 14 января 2020

Есть ли способ установить элемент с абсолютным позиционированием для покрытия всего экрана в мобильном браузере с включенным видом рабочего стола на рабочем столе?

Мое приложение состоит из некоторых элементов с абсолютным позиционированием, охватывающих весь экран (ширина - 100% и высота 100%), поэтому я могу изменить их, просто выдвинув один и один внутрь. Это прекрасно работает как в настольном, так и в мобильном браузере, но когда я включаю просмотр рабочего стола на мобильных устройствах, элемент body все еще покрывает весь экран. в то время как абсолютные элементы намного меньше. Похоже, это

enter image description here

Я тестировал его на мобильном браузере 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 мобильном телефоне выглядит так enter image description here

1 Ответ

0 голосов
/ 14 января 2020

Это то, что вы ищете? 

$("#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>
...