Высота 100vh при отображении адресной строки - Chrome Mobile

Question

Высота 100vh при отображении адресной строки - Chrome Mobile

Я сталкивался с этой проблемой несколько раз и задавался вопросом, было ли решение этой проблемы. Моя проблема возникает в мобильном приложении Chrome. Там вы можете прокрутить немного вниз, и адресная строка исчезнет. Пока все хорошо, давайте сделаем пример:
Контейнеры height установлен в 100vh,

Как видите, нижняя часть отрезана.

Когда я прокручиваю вниз, это выглядит так:

Теперь это выглядит хорошо. Очевидно, что Chrome вычисляет высоту адресных строк в высоту области просмотра. Итак, мой вопрос:

Есть ли способ, чтобы он выглядел одинаково с адресной строкой или без нее? Так что контейнер расширяется или как?

195

html css google-chrome mobile-chrome address-bar chrome-mobile

Источник

user5883638 17 окт '18 в 06:50

13 ответов

Другие вопросы по тегам html css google-chrome mobile-chrome address-bar chrome-mobile

user111866 24 ноя '19 в 20:55 2019-11-24 20:55 · Answer 1 · 2019-11-24 20:55

Согласно этой официальной статье в сети Chrome, правильный способ установить высоту для заполнения видимого окна просмотра:height: 100%, либо на <html> элемент или на position: fixedэлемент. Как описано в документе, это обеспечивает совместимость с мобильным Safari и не зависит от размера строки URL.

user304371 20 ноя '21 в 18:23 2021-11-20 18:23 · Answer 2 · 2021-11-20 18:23

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

Упомянутая проблема в вопросе хорошо известна:

&lt;img alt="введите описание изображения здесь" src="https://i.stack.imgur.com/qpW3Y.png"/&gt;

Все началось с выпуска Apple Webkit . Одна из проблем заключалась в том, что разработчики сайта использовали для расчета размер шрифта (calc(100/vh*something)). Если 100vh будет динамическим, когда пользователь прокручивает страницу вниз, а адресная строка скрыта, то размер шрифта, как и любых других связанных элементов, будет искажен, что приведет к очень плохому взаимодействию с пользователем, не говоря уже о нагрузке на CPU/GPU.
Решением Apple было постоянное соответствие большего размера экрана (без адресной строки) 100vh . Итак, когда отображается адресная строка и вы используете 100vhвысота, при которой нижняя часть будет выходить за пределы экрана. Многие разработчики не согласны с таким решением и считают единицы области просмотра динамическими и в точности равными видимому «порту просмотра».
Команда Google Chrome решила обеспечить совместимость с браузером Apple и придерживаться того же решения.
height: 100%в большинстве современных браузеров равна реальной видимой части, т.е. высота варьируется и зависит от того, видна или скрыта адресная строка во время прокрутки.
Полосы могут появляться не только вверху экрана, но и внизу (современная iOS), а экранная клавиатура может укорачивать вид. Существует хорошая демонстрация для проверки на мобильных устройствах фактического размера &lt;tcode id="118851789"&gt;&lt;/tcode&gt;.&lt;br/&gt; &lt;ahref="https: ho6ssl.jpg"="" i.stack.imgur.com="" rel="nofollow noopener noreferrer"&gt;&lt;img alt="введите описание изображения здесь" src="https://i.stack.imgur.com/HO6SSl.jpg"/&gt;&lt;/ahref="https:&gt;

Решение 1

      html, body { height: 100%; }
.footer-element { 
  position: fixed; 
  bottom: 10px;
}

Решение 2.
Компенсируйте некоторую зависимость от vhс видимой высотой бара, равной "100vh - 100%", когда бар скрыт, разница будет равна 0.

      html, body { height: 100vh; }
.footer-element { 
  position: fixed; 
  bottom: calc(10px + (100vh - 100%));
}

user278629 22 сен '19 в 14:03 2019-09-22 14:03 · Answer 3 · 2019-09-22 14:03

Попробуйте использовать min-height: -webkit-fill-available. Вы также можете добавить его нижеheight: 100vh как запасной вариант.

42

Источник

user278629 22 сен '19 в 14:03

user14994011 21 июн '23 в 00:28 2023-06-21 00:28 · Answer 4 · 2023-06-21 00:28

Теперь есть три новых блока просмотра:

sv*- Минимально возможное окно просмотра, размер без адресной строки
lv*- Максимально возможное окно просмотра, включая адресную строку.
dv*- Динамическое окно просмотра, размер которого зависит от того, видна ли адресная строка

Применение

Поскольку вы хотите, чтобы размер контейнера менялся в зависимости от того, видна ли адресная строка, вам нужна единица измерения:dvh.

      .container {
    height: 100dvh;
}

Надеюсь, это помогло!

дальнейшее чтение

user6569224 28 сен '21 в 22:24 2021-09-28 22:24 · Answer 5 · 2021-09-28 22:24

      .my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

Теперь давайте получим внутреннюю высоту области просмотра в JavaScript:

      // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

источник: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

user8601061 01 май '19 в 11:09 2019-05-01 11:09 · Answer 6 · 2019-05-01 11:09

Вы можете исправить проблему с адресной строкой, установив высоту: 100% для html и тега body, а также для разницы между курсом и отступом тела к нулю, а также вы можете управлять прокруткой в главном div для лучшего контроля

11

Источник

user8601061 01 май '19 в 11:09

user12858216 08 июл '20 в 15:35 2020-07-08 15:35 · Answer 7 · 2020-07-08 15:35

Я столкнулся с аналогичной проблемой и использовал это решение с ReactJS: `import {useLayoutEffect, useState} from 'react';

function useWindowSize() {
  const [size, setSize] = useState([0, 0]);
  useLayoutEffect(() => {
    function updateSize() {
      setSize([window.innerWidth, window.innerHeight]);
    }
    window.addEventListener('resize', updateSize);
    updateSize();
    return () => window.removeEventListener('resize', updateSize);
  }, []);
  return size;
}

`

этот useWindowSizeфункция взята из представления Rerender при изменении размера браузера с помощью React

когда я использовал его в своем коде, он выглядел так:

const MessageList = () => {
      const { messages } = useContext(ChatContext);
      const [, windowHeight] = useWindowSize();
      return (
        <div
          className="messages"
          style={{
            height: windowHeight - 80 - 48, // window - message form - navbar
          }}
        >
          {messages.map((m, i, list) => ( <Message ... /> )}
        </div>
      );
    };

`

user12493648 11 июн '20 в 20:46 2020-06-11 20:46 · Answer 8 · 2020-06-11 20:46

Я только что придумал, как изменить размер элемента, чтобы высота не включала в себя smarthpones без домашней кнопки Android с экранной навигационной панелью И верхней панелью браузера. Если содержимое больше экрана, элемент должен вырасти до размера, в который поместится все, поэтому я использую min-height.

<script>
  window.addEventListener("resize", handleResize);
  function handleResize() {
    document.querySelectorAll(".header")[0].style.position = "fixed";
    document.querySelectorAll(".header")[0].style.top = "0";
    document.querySelectorAll(".header")[0].style.bottom = "0";
    document.querySelectorAll(".header")[0].style.minHeight = "auto";
    var h = document.querySelectorAll(".header")[0].clientHeight;
    document.querySelectorAll(".header")[0].style.position = "relative";
    document.querySelectorAll(".header")[0].style.minHeight = h + "px";
  }
  handleResize();
</script>

user16437905 31 май '23 в 12:44 2023-05-31 12:44 · Answer 9 · 2023-05-31 12:44

Попробуйте использовать высоту динамического просмотра (dvh), например 100dvh. Это относительно новое свойство, и некоторые браузеры все еще могут его не поддерживать, но оно решает проблему адресной строки.

https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4

1

Источник

user16437905 31 май '23 в 12:44

user8745926 06 авг '19 в 13:04 2019-08-06 13:04 · Answer 10 · 2019-08-06 13:04

Я нашел хорошее решение...

.page-header {
  @supports (-webkit-appearance:none) {
    .os-android & {
      min-height: calc(100vh - 56px);
    }
  }
}

Взято отсюда

1

Источник

user8745926 06 авг '19 в 13:04

user5788142 14 авг '21 в 07:14 2021-08-14 07:14 · Answer 11 · 2021-08-14 07:14

Просто хотел немного расширить верхний ответ здесь - я обнаружил, что, как упоминал Росс Лайт выше, вы хотите использовать для учетной записи в адресной строке веб-браузера. Однако, чтобы это работало, вы должны установить высоту для тега html и тега body, равную или ваши div не будут расширяться должным образом:

      <!DOCTYPE html>
<html>
  <head>

    <style>

      html, body {
        height: 100%;
      }

      .fillViewport {
        height: 100%;
      }

      .redBackground {
        background-color: red;
      }

    </style>

  </head>
  <body>

    <div class="fillViewport redBackground"></div>

  <body>
</html>

user10116007 02 фев '23 в 14:38 2023-02-02 14:38 · Answer 12 · 2023-02-02 14:38

Следующий фрагмент работал для меня. Я вставил рамку в основной тег в качестве примера обертки.

0

Источник

user10116007 02 фев '23 в 14:38

user5904036 14 ноя '19 в 17:55 2019-11-14 17:55 · Answer 13 · 2019-11-14 17:55

... так что насчет этого?

html,
body {
  width: 100vw;
  height: 100vh;
}
@media (max-width: 480px) {
  html,
  body {
    height: calc(100vh - 56px);
  }
}

-2

Источник

user5904036 14 ноя '19 в 17:55