Как сделать так, чтобы <div> точно заполнял окно браузера, включая Mobile Safari с 2019 года

10

Я работаю над одностраничным веб-приложением, которое чаще всего будет использоваться на мобильных устройствах. Одной из его функций является режим карты, который временно занимает все окно браузера; шкала расстояний и некоторые элементы управления прикреплены к четырем углам карты. Вот небольшой скриншот карты, чтобы вы могли понять, о чем я говорю:

Снимок экрана с наложением карты

Карта реализована в виде <div>со position: fixedи все четыре координаты ноль; Я также временно установил значение <body>в overflow: hiddenто время, когда карта видима, чтобы обрабатывать случай, когда отображение базового приложения прокручивается от источника. Этого достаточно, чтобы карта работала именно так, как я хочу в настольных браузерах. Мобильные браузеры также требовали, чтобы я дал мета-тег viewport с чем-то вроде "width=device-width,user-scalable=no"того, чтобы сделать видимую область окна точно соответствующей области просмотра.

Все это прекрасно работало несколько лет назад, когда я первоначально написал это приложение, но где-то в этом направлении iOS Safari прекратил соблюдение любых параметров метапортпорта, связанных с масштабированием - очевидно, слишком много сайтов неправильно использовали тег, в результате чего текст, который был нечитабельно маленьким, еще не масштабируется. В настоящее время, если вы включите карту в этом браузере, вы, вероятно, получите слегка увеличенный вид, который обрезает эти кнопки справа и снизу - и вы ничего не можете с этим поделать, потому что все касания интерпретируются как жесты масштабирования / панорамирования для карты, а не прокрутка браузера. Карта не очень полезна без доступа к функциям с помощью этих кнопок, а без кнопки в верхнем правом углу вы даже не сможете закрыть карту. Единственный выход - перезагрузить страницу, что может привести к потере несохраненных данных.

Я определенно собираюсь добавить использование history.pushState/, onpopstateчтобы наложение карты велось как отдельная страница. Вы сможете выйти из режима карты, используя кнопку браузера «Назад», но это не решает остальную часть потери функциональности из-за отсутствия кнопок.

Я рассмотрел использование .requestFullscreen()для реализации наложения карты, но это не поддерживается везде, где в противном случае приложение можно было бы использовать. В частности, это явно не работает на iPhone, а на iPad вы получаете строку состояния и огромную кнопку «X», наложенную на ваш контент - моя шкала расстояний, скорее всего, больше не будет читаться. Во всяком случае, это не семантически то, что я действительно хочу - мне нужно полное окно , а не полный экран.

Как получить полноэкранное отображение, работающее в современных браузерах? Вся информация, которую я могу найти по теме, говорит об использовании мета-тега viewport, но, как я уже говорил, больше не работает.

html  css  mobile-safari  fullscreen 
— jasonharper
источник
1
@Joehat, основная часть приложения является отзывчивым; это не проблема. Проблема заключается только в этой функции наложения карты: сенсорные жесты используются для масштабирования / панорамирования карты (это SVG, сгенерированный d3.js), не позволяя настроить масштабирование и прокрутку браузера. Это работало очень хорошо, когда браузер позволял мне контролировать область просмотра.
— Jasonharper
1
Некоторые основные вопросы: вы используете сброс CSS? Есть ли какие-нибудь странные поля или прокладки на чем-либо? Тело установлено на 100vw x 100vh? Тело расположено относительно вашей карты div для работы?
— allallgoodie
1
Вы можете , пожалуйста , поделитесь образец кода для этого .. я проверю и дам вам знать
— Ranjith V
1
покажи свой код !!
— Нихил Суганд
1
Снимок экрана или пример содержимого, которое помещается в это окно, действительно поможет определить, что происходит.
— Брайс Ховитсон

Ответы:

1

Решение

Установите полноэкранную высоту div с window.innerHeightпомощью JavaScript, а затем обновите ее при изменении размеров окна.

Та же проблема здесь:

https://stackoverflow.com/a/37113430/8662476

Больше информации:

— Мауриси Абад
источник
1

Вы должны установить высоту тела и HTML на 100%

   html, body {
       width: 100%;
       height: 100%;
       margin: 0;
    }
— iicaptain
источник
1

Вы пробовали это?

width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
— Раджилеш Паноли
источник
(Я полагаю, вы имели в виду vwширину, а не vh...) Какой элемент вы предлагаете мне добавить это? Я попробовал его в нескольких местах ( <html>, <body>и карты <div>), но не видит различий.
— Джейсон Харпер
Это для div. Есть ли какие-либо свойства масштаба или масштабирования, примененные к какому-либо элементу?
— Раджилеш Паноли
На уровне HTML преобразований нет, масштабирование / панорамирование моей карты выполняется путем применения переводов к составляющим SVG-элементам.
— Джейсон Харпер
0

попробуй это:

<meta name="viewport" content="width=device-width, height=device-height , 
initial-scale=1.0,user-scalable=no, shrink-to-fit=yes" />
— Нихил Суганд
источник
Это ничего не изменило, и я не вижу причин ожидать этого: shrink-to-fit=yesэто значение по умолчанию, и Safari больше не обращает внимания на параметры масштабирования.
— Jasonharper
0

Это старое решение, и оно решает проблему, которая тесно связана, но не совсем одинакова, поэтому я не уверен, применимо ли это: https://github.com/gajus/brim

Предполагается, что это решение, похожее на minimal-ui.

Вот еще один вопрос, который ссылается на этот ответ: iOS 8 удалил свойство viewpoint «minimal-ui», есть ли другие «мягкие полноэкранные» решения?

Дайте мне знать, если это поможет.

— Сэм Сабин
источник
0

если вы используете, position: fixedпросто используйте стандартный метод CSS, который существует уже много лет.

.divFixedClass{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

Это просто сделает размер div автоматически равным полному размеру области просмотра, и, используя опцию исправления, она заблокирована на месте, независимо от того, сколько они прокручивают, вы можете отключить прокрутку тела, если вам нужно с 

html.noScroll, html.noScroll > body{
    overflow:none;
}

поэтому, если вы просто добавите класс noScroll в тег html, он отключит прокрутку. затем, когда вы захотите снова прокрутить, вы можете.

— Barkermn01
источник
0

Вы можете реализовать это, используя двухслойную структуру для элементов управления карты и слоя карты. Это означает, что вам на самом деле не нужно ничего javascriptдля реализации того, что вы хотите (хотя в вопросе не было приведено ни одного примера кодирования). Вы можете манипулировать окном просмотра, CSSи это фактическое значение vwи vhдля того, чтобы ответить на ваш комментарий. Как 100vw / 100vh должен помочь? , это может помочь, поскольку vрасшифровывается как viewport.

Посмотрите фрагмент, например.

Можно привести лучший пример (быть более точным в отношении конкретных параметров, которые могут быть пропущены), если в вопросе присутствует некоторая кодировка.

PS: слой карты моделируется изображением, которое увеличивается при прокрутке.

function zoom(event) {
  event.preventDefault();

  scale += event.deltaY * -0.01;

  // Restrict scale
  scale = Math.min(Math.max(.125, scale), 4);
  if (scale < 1) {
    scale = 1;
  }
  // Apply scale transform
  el.style.transform = `scale(${scale})`;
}
let scale = 1;
const el = document.getElementById('map');
el.onwheel = zoom;
.container {
  position: absolute;
   display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
}

#map {
  width: 100vw;
  height: 100vh;
    background-repeat: no-repeat;
  background-position: center center;
  background-image: url(https://picsum.photos/800/500.webp);
  z-index: 1;
}


#main {
  display: grid;
  position: absolute;
  background-color: transparent;
  top: 0;
  left: 0;
  grid-template-columns: 6rem auto 6rem;
  grid-template-rows: 3rem auto 3rem;
  width: 0;
  height: 0;
 z-index: 2;
}

.t-l {
background: #fc0;
  position: fixed;
  z-index: 2;
  color: #000;
  top; 0;
  left: 0;
  width: 6rem;
  height: 3rem;
  display: block;
  grid-column-start: 1;
  grid-column-end: column1-end;
  grid-row-start: 1;
  grid-row-end: row1-end;
}
.t-r {
background: #0cf;
  position: fixed;
  z-index: 2;
  color: #000;
  top; 0;
  left: calc(100vw-6rem);
  right: 0;
  width: 6rem;
  height: 3rem;
  display: block;
  grid-column-start: 3;
  grid-column-end: column3-end;
  grid-row-start: 1;
  grid-row-end: row1-end;
}
.b-l {
background: #c0f;
  position: fixed;
  z-index: 2;
  color: #000;
  bottom: 0;
  top: calc(100vh-3rem);
  left: 0;
  width: 6rem;
  height: 3rem;
  display: block;
  grid-column-start: 1;
  grid-column-end: column1-end;
  grid-row-start: 3;
  grid-row-end: row3-end;
}
.b-r {
background: #cf0;
  position: fixed;
  z-index: 2;
  color: #000;
  top: calc(100vh-3rem);
  left: 100vw;
  margin-left: -6rem;
  bottom: 0;
  width: 6rem;
  height: 3rem;
  display: block;
  grid-column-start: 3;
  grid-column-end: column3-end;
  grid-row-start: 3;
  grid-row-end: row3-end;
}
<div class="container">

  <div id="main">
    <button class="t-l">top left control</button>
    <button class="t-r">top right control</button>
    <button class="b-l">bottom left control</button>
    <button class="b-r">bottom right control</button>
  </div>
<div id="map"></div>
</div>
Развернуть фрагмент

— Питер Дармис
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.