Адаптивный дизайн с vmin и мобильными адресными строками - PullRequest
Новая
       11

Адаптивный дизайн с vmin и мобильными адресными строками

0 голосов
/ 01 июня 2018

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

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

Мой 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 игнорировать адресную строку и делать вид, что ее там нет?Если нет, какие еще варианты у меня есть, чтобы решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 04 июня 2018

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

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

  1. используйте Javascript и вручную установите размер
  2. , используйте vmax в сочетании с aspect-ratio медиа-запросами для оценки vmin
    (кажется хакерским, но, скорее всего, чтоВы хотите)
  3. запретить скрытие адресной строки во-первых: https://stackoverflow.com/a/33953987/2422125
  4. запретить отображение адресной строки во-первых: перейти в полноэкранный режим:
    Как сделать
    всегда полноэкранным?
  5. попробуйте <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1, user-scalable=no">
  6. использовать сетку вместо androbin sugested (вероятно, лучший)
0 голосов
/ 04 июня 2018

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

Я бы использовал grid на вашем месте.Вы можете использовать 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>
...