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

Question

Hoqus @Hoqus

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

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

Вопрос задан более трёх лет назад
132 просмотра

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, спасибо, попробовал поиграться с размерами блока этого и единицами измерения, но кажется всеж дело в чем то другом...

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Fullstack-разработчик на JavaScript + ИИ

11 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию + ИИ

6 месяцев

Далее

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

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

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

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

JavaScript

+1 ещё

Средний
Как выводить изображения в 2 или в 3 колонки в строке в зависимости от пропорций изображений?
- 1 подписчик
- 20 июл.
- 107 просмотров
1

ответ
CSS

Сложный
Как добиться такого же фона ( как у свг)?
- 1 подписчик
- 15 июл.
- 210 просмотров
1

ответ
JavaScript

+2 ещё

Сложный
Как заставить библиотеку docs js нарисовать бордер при переносе таблицы?
- 2 подписчика
- 10 июл.
- 162 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как подстраивать размер канваса под размер страницы?
- 1 подписчик
- 01 июл.
- 131 просмотр
0

ответов
HTML

+1 ещё

Средний
Как выставить элементу ширину по содержимому при переносах?
- 2 подписчика
- 30 июн.
- 184 просмотра
1

ответ
HTML

+3 ещё

Средний
Как создать каркас верстки который будет считаться по высоте, а не по ширине?
- 4 подписчика
- 26 июн.
- 416 просмотров
4

ответа
JavaScript

+2 ещё

Простой
Не работает тень + слайдер, есть варианты?
- 2 подписчика
- 21 июн.
- 210 просмотров
1

ответ
HTML

+1 ещё

Простой
Как оформить так карточку типа бенто стиль?
- 1 подписчик
- 13 июн.
- 254 просмотра
3

ответа
CSS

Простой
Как убрать «треугольник» от скролла?
- 1 подписчик
- 12 июн.
- 217 просмотров
1

ответ
JavaScript

Средний
Значение переменной в строку или сохранение в VK?
- 1 подписчик
- 10 июн.
- 161 просмотр
2

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

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, спасибо, попробовал поиграться с размерами блока этого и единицами измерения, но кажется всеж дело в чем то другом...

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

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

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

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