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

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

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

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

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

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

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

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

HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- 12 часов назад
- 68 просмотров
1

ответ
JavaScript

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 14 часов назад
- 54 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- 14 часов назад
- 74 просмотра
0

ответов
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- 15 часов назад
- 49 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- 16 часов назад
- 61 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- 18 часов назад
- 103 просмотра
1

ответ
CSS

Простой
Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?
- 1 подписчик
- 18 часов назад
- 53 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 19 часов назад
- 75 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- 20 часов назад
- 37 просмотров
1

ответ
JavaScript

Простой
Почему в букмарклете должным образом не выполняется Alt + Click?
- 1 подписчик
- вчера
- 45 просмотров
1

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

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

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

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

Мэтч

от 80 000 ₽

Взлом автомобильной программы

19 апр. 2024, в 05:01

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

Доработать телеграм бота

19 апр. 2024, в 03:52

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

Написать код на python

19 апр. 2024, в 03:01

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

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

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

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

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

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