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

Question

Hoqus @Hoqus

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

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

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

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

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

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

Skillbox

JavaScript

3 месяца

Далее
Яндекс Практикум

Фронтенд-разработчик расширенный

13 месяцев

Далее
Академия Eduson

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

11 месяцев

Далее

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

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

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

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

CSS

Простой
Как найти в DOM-элементе блоки (div), которые имеют ширину больше, чем их родительский элемент (td) средставми CSS?
- 2 подписчика
- 12 дек.
- 106 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как можно реализовать что то вроде селекта внутри родителя у которого есть скрытые элементы и должна быть горизонтальная прокрутка?
- 1 подписчик
- 11 дек.
- 153 просмотра
0

ответов
CSS

Простой
Как сделать “арочный” блок адаптивным?
- 1 подписчик
- 11 дек.
- 201 просмотр
0

ответов
CSS

Простой
Как сделать вырез снизу без задания цвета?
- 1 подписчик
- 11 дек.
- 106 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как идентифицировать проксированные ошибки?
- 1 подписчик
- 05 дек.
- 131 просмотр
1

ответ
JavaScript

+2 ещё

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

ответов
JavaScript

Простой
Как сделать чтоб условия не перезаписывались?
- 1 подписчик
- 02 дек.
- 251 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Элемент стилизации на js, как сделать чтобы не было резкой смены картинки фона?
- 1 подписчик
- 27 нояб.
- 220 просмотров
1

ответ
JavaScript

Простой
Переход по ссылке с параметром на конкретный узел в vis.js?
- 1 подписчик
- 24 нояб.
- 119 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как сделать сложную виртуализацию?
- 1 подписчик
- 22 нояб.
- 293 просмотра
2

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

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

MakeDifference

от 60 000 до 110 000 ₽

Frontend-разработчик (Vanilla JS, high-load media platform)

Karma8

от 200 000 до 300 000 ₽

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

ITK academy • Нижний Новгород

от 50 000 до 90 000 ₽

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

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

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

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

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