Як зробити <div> точно заповнити вікно браузера, включаючи Mobile Safari станом на 2019 рік

10

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

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

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

Я обов'язково додаю використання history.pushState/, onpopstateщоб накладка на карту вела себе як окрема сторінка. Ви можете вийти з режиму карти за допомогою кнопки "Назад" браузера, але це не стосується решти втрати функціональності через відсутні кнопки.

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

Як змусити дисплей із повним вікном працювати на сучасних браузерах? Вся інформація, яку я можу знайти в темі, розповідає про використання тегу метапогляду, але, як я вже згадувала, це більше не працює.

— ясонхарпер
джерело

1

@Joehat, основна частина програми є чуйним; це не проблема. Саме ця функція накладання карти має проблему: жести дотику використовуються для збільшення / переміщення карти (це SVG, породжений d3.js), не залишаючи жодного способу регулювання масштабування та прокрутки браузера. Це спрацювало чудово, коли браузер дозволив мені контролювати вікно перегляду.

— jasonharper

1

Деякі основні запитання: Ви використовуєте скидання CSS? Чи є якісь дивні поля чи підставки на чомусь? Чи встановлено корпус на 100vw x 100vh? Чи розташоване тіло відносно для роботи з вашою картою поділом?

— itsallgoodie

1

Чи можете ви, будь ласка, поділитися зразком коду для цього .. Я перевірю і повідомляю вас

— Ranjith v

1

покажіть свій код !!

— nikhil sugandh

1

Знімок екрана або якийсь приклад вмісту, що потрапляє у це вікно, справді допоможе визначити, що відбувається.

— Брайс Хауітсон

1

Рішення

Встановіть висоту повноекранного Div на window.innerHeightJavaScript, а потім оновіть його на розмірах вікна.

Тут же проблема:

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>), але відмінностей не побачив.

— jasonharper

Це для діва. Чи застосовується якесь властивість масштабу перетворення або масштабування до будь-якого елемента.?

— Раджилеш Панолі

На рівні HTML немає перетворень, масштабування / панорування моєї карти здійснюється за допомогою застосування перекладів до елементів SVG, що складають її.

— jasonharper

0

спробуйте це:

<meta name="viewport" content="width=device-width, height=device-height , 
initial-scale=1.0,user-scalable=no, shrink-to-fit=yes" />

— nikhil sugandh
джерело

Це нічого не змінило, і я не бачу причин очікувати цього: shrink-to-fit=yesце за замовчуванням, і Safari більше не звертає ніякої уваги на параметри масштабування.

— jasonharper

0

Оскільки я не можу коментувати, я хотів би додати, що ви повинні перевірити, чи є ваш тег тіла висотою браузера. Ви також можете перевірити це: Chrome / Safari не заповнює 100% висоту гнучких батьків

— трикутник
джерело

0

Це старе рішення і стосується проблеми, яка тісно пов'язана, але не зовсім однакова, тому я не впевнений, чи застосовується це: https://github.com/gajus/brim

Це повинно бути рішенням, подібним до мінімального ui.

Ось ще одне питання, на яке посилається ця відповідь: iOS 8 видалив властивість огляду "minimal-ui".

Дайте мені знати, чи це взагалі допомагає.

— Сем Сабін
джерело

0

Спробуйте наступний код для div

.class{height:100vh;}

— Ата Ур Рехман
джерело

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виступає за вікно перегляду.

Дивіться, наприклад, фрагмент.

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

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>

Розгорніть фрагмент

— Пітер Дарміс
джерело