Отзывчивый дизайн с vmin и мобильными адресными барами

Я пытаюсь создать несколько квадратных divs рядом друг с другом (которые могут расширяться по высоте, если текста слишком много... но в большинстве случаев текста не будет слишком много). Я пытаюсь настроить его в ответном порядке.

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

В моем HTML-коде есть следующая строка видового экрана:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Мой код выглядит так:

.block {
        width: 80vmin;
        min-height: 80vmin;
        margin: 5% auto;
        border-radius: 15vmin;
        padding: 20px 10px;

}

Очевидно, виновником является компонент vmin. Если я не укажу vmin, ящики будут слишком большими, если смотреть в альбомном режиме.

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

Ответ 1

Chrome из-за плохой UX добавил функцию подсчета значений vh, vmin и только после скрытия адресной панели. Таким образом, браузер не будет считать их слишком много раз, а fps не будет падать, но эффект jumping появится.

Я бы использовал сетку, если бы был вами. Вы можете использовать высоту min-content и поля будут одинаково высоки независимо друг от друга в каждой строке. С repeat, использование auto-fill и minmax может добавить столько ящиков, сколько возможно, без добавления дополнительных css с мобильным запросом. (@media...)

РЕДАКТИРОВАТЬ:

Пример комментария:

main {
  display: grid;
  grid-auto-rows: min-content;
  /* to each row same height:
  grid-auto-rows: 1fr; */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* to center:
  justify-items: center;
  align-items: center; */
}

<main>
  <div>Hello</div>
  <div><img src="http://via.placeholder.com/100x150/000000"></div>
  <div><img src="http://via.placeholder.com/100x150/000000"></div>
  <div>World</div>
  <div>Hello</div>
  <div>World</div>
</main>

Ответ 2

Вы (вероятно) жертва CSS3 100vh не постоянна в мобильном браузере, полагая, что изменение vh является причиной изменения vmin.

Возможные решения:

используйте Javascript и вручную установите размер
используйте vmax в сочетании с медиа-запросами aspect-ratio для оценки vmin
(чувствует себя взломанным, но, скорее всего, выполнит то, что вы хотите)
запретить скрытие адресной строки: fooobar.com/info/352175/...
запретить отображение адресной строки в первую очередь: перейти в полноэкранный режим:
Как сделать <div> всегда полный экран?
попробуйте <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1, user-scalable=no">
использовать сетку вместо того, чтобы androbin sugested (возможно, лучший)