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

Question

Hoqus @Hoqus

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

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

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

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

+2 ещё

Простой
Почему нет взаимосвязи между файлами HTML, CSS, JS?
- 1 подписчик
- час назад
- 20 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Писал ли кто-то автотесты с помощью Cypress по виджетам на amCharts 5? Можете помочь разъяснить структуру и синтаксис этого дела?
- 1 подписчик
- 2 часа назад
- 12 просмотров
0

ответов
JavaScript

Простой
Как не прекращая цикл пройтись?
- 1 подписчик
- 4 часа назад
- 44 просмотра
0

ответов
JavaScript

Средний
Можно ли прописать формулу расчёта с нефиксированной скидкой?
- 1 подписчик
- 5 часов назад
- 47 просмотров
1

ответ
JavaScript

Простой
Как инициировать скрипт при определенной ширине экрана?
- 1 подписчик
- 8 часов назад
- 41 просмотр
1

ответ
JavaScript

Простой
Как задать тригер onchange при изменении value?
- 1 подписчик
- 9 часов назад
- 49 просмотров
1

ответ
JavaScript

Средний
Как можно менять ::backdrop через JS?
- 1 подписчик
- 10 часов назад
- 48 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Не могу понять почему не работает код Apps Script?
- 1 подписчик
- 11 часов назад
- 47 просмотров
0

ответов
JavaScript

Простой
Как в этой задаче работает вложенный цикл?
- 1 подписчик
- 11 часов назад
- 93 просмотра
1

ответ
JavaScript

Простой
Как вывести правильный формат даты в JS?
- 1 подписчик
- 12 часов назад
- 95 просмотров
2

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

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

div. • Ставрополь

от 40 000 до 90 000 ₽

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

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

Full-Stack для сайта на Bitrix (Аспро). Знания в Java, CSS и PHP

12 нояб. 2024, в 16:00

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

Разместить шаблон сайта с личным кабинетом под хостинг серверов

28 нояб. 2024, в 00:33

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

Нужно записать видео уроки по машинному обучению

28 нояб. 2024, в 00:20

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

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

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

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

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

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