Как сделать чтобы на мобильной версии адаптива сохранялась высота как на десктопной версии?

Question

Hoqus @Hoqus

Как сделать чтобы на мобильной версии адаптива сохранялась высота как на десктопной версии?

При тестах через девтулс высота вьюпорта как я понял съедается если открыть не с десктопа, на мобилке открывал тоже ломается, в стилях работал % и px, не понимаю как это пофиксить...
скрипт на открытие и закрытие последнего блока с формой тоже слетает из за этого.
опубликованная работа по ссылке:
https://hocus-coding.github.io/myProfile/

Вопрос задан более года назад
123 просмотра

8 комментариев

Подписаться 1 Простой 8 комментариев

ProjectSoft @ProjectSoft

height: 100vh

Написано более года назад
Hoqus @Hoqus Автор вопроса

ProjectSoft, чему именно ?

Написано более года назад
ProjectSoft @ProjectSoft

Hoqus, про что спрашиваете, про то и пишу.
https://developer.mozilla.org/ru/docs/Learn/CSS/Bu...

Написано более года назад
Hoqus @Hoqus Автор вопроса

ProjectSoft, не совсем вашу мысль понимаю, я знаю как работает height и vh, я пробовал раннее строить высоту крупных блоков и этими единицами, включая <html>, так не работает...
Можете расписать чуть шире что вами имелось ввиду?

Написано более года назад
DOShick @DOShick

Можно немого более развёрнуто? Покрутил, полистал, проблема именно в форме, или в чём-то другом?

Написано более года назад

Hoqus @Hoqus Автор вопроса

Не уверен, но видимо высота контента, изначально она у меня 100% (у блоков родителя), но мобильные девайсы её считывают по другому(моя догадка) и контент последнего блока с формой уезжает вверх за экран, либо он вовсе не открывается поскольку перестает работать скрипт

let pageHeight = page.clientHeight;
  let scrollH = page.scrollHeight;
  let scrolled = page.scrollHeight - top;

  function comparison() {

    let arr = [
      parseInt(scrolled),
      parseInt(scrolled) + 1,
      parseInt(scrolled) - 1,
    ];

    return arr.includes(pageHeight) ? true : false;
  }

  if (comparison()) {
    popup.classList.add('form__container--show');
    footer.classList.remove('main-footer--hidden');
    console.log(pageHeight);
    console.log(scrolled);
  } else {
    console.log(pageHeight);
    console.log(scrolled);
    popup.classList.remove('form__container--show');
    footer.classList.add('main-footer--hidden');
  }

Написано более года назад

DOShick @DOShick

2 из 3 моб браузеров не отображают и если принять то, что скрипт работает всегда и везде, то скорее всего дело в .form__container--show , мб можно заменить height: 100%; на height: 100vh;

Написано более года назад
Hoqus @Hoqus Автор вопроса

DOShick, спасибо, попробовал поиграться с размерами блока этого и единицами измерения, но кажется всеж дело в чем то другом...

Написано более года назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- 23 минуты назад
- 4 просмотра
0

ответов
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- 51 минуту назад
- 17 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как скачать pdf из встроенного просмотрщика на сайте?
- 1 подписчик
- час назад
- 64 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как построение маршрута на 2GIS API v2.0?
- 1 подписчик
- 3 часа назад
- 40 просмотров
0

ответов
JavaScript

Средний
Эффект наложения блоков?
- 1 подписчик
- 17 часов назад
- 105 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- 17 часов назад
- 71 просмотр
0

ответов
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 17 часов назад
- 42 просмотра
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- 18 часов назад
- 35 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- 22 часа назад
- 75 просмотров
2

ответа
JavaScript

Простой
Как после сабмита очистить поле type="tel" и показать очищенную маску?
- 1 подписчик
- 22 часа назад
- 64 просмотра
0

ответов
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Установить вебхук на сайт

24 апр. 2024, в 16:19

4000 руб./за проект

Натянуть верстку Опенкарт

24 апр. 2024, в 15:34

20000 руб./за проект

SEO с опытом в контентных проектах (СМИ)

24 апр. 2024, в 15:32

130000 руб./за проект

Hoqus, про что спрашиваете, про то и пишу.
https://developer.mozilla.org/ru/docs/Learn/CSS/Bu...
ProjectSoft, не совсем вашу мысль понимаю, я знаю как работает height и vh, я пробовал раннее строить высоту крупных блоков и этими единицами, включая <html>, так не работает...
Можете расписать чуть шире что вами имелось ввиду?
Можно немого более развёрнуто? Покрутил, полистал, проблема именно в форме, или в чём-то другом?
Не уверен, но видимо высота контента, изначально она у меня 100% (у блоков родителя), но мобильные девайсы её считывают по другому(моя догадка) и контент последнего блока с формой уезжает вверх за экран, либо он вовсе не открывается поскольку перестает работать скрипт

let pageHeight = page.clientHeight; let scrollH = page.scrollHeight; let scrolled = page.scrollHeight - top; function comparison() { let arr = [ parseInt(scrolled), parseInt(scrolled) + 1, parseInt(scrolled) - 1, ]; return arr.includes(pageHeight) ? true : false; } if (comparison()) { popup.classList.add('form__container--show'); footer.classList.remove('main-footer--hidden'); console.log(pageHeight); console.log(scrolled); } else { console.log(pageHeight); console.log(scrolled); popup.classList.remove('form__container--show'); footer.classList.add('main-footer--hidden'); }
2 из 3 моб браузеров не отображают и если принять то, что скрипт работает всегда и везде, то скорее всего дело в .form__container--show , мб можно заменить height: 100%; на height: 100vh;
DOShick, спасибо, попробовал поиграться с размерами блока этого и единицами измерения, но кажется всеж дело в чем то другом...

Как сделать чтобы на мобильной версии адаптива сохранялась высота как на десктопной версии?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт