Как я могу заменить все VH единиц на фиксированные значения пикселей для мобильных устройств?

Мой сайт использует vh Единицы практически для всего: размеры шрифта, позиции, высоты и ширины. Из-за характера моего сайта именно так я решил сделать его адаптивным к различным пропорциям.

Проблемы на мобильном телефоне:

  1. Программная клавиатура Android сжимает область просмотра и, в свою очередь, мой контент до такой степени, что он становится нечитаемым:

    Взглянуть

  2. Адресная строка Mobile Safari резко сжимается и расширяет область просмотра и мое содержимое, когда оно появляется и исчезает при изменении направления прокрутки.

Я видел некоторые потенциальные решения по переполнению стека, но ни одно из быстрых ручных исправлений для каждого элемента не сработало для моего случая, когда почти каждый элемент использует vh,

Я надеялся использовать jQuery для обнаружения мобильного телефона, и если это правда, каким-то образом заменить все vh единиц в моем CSS с фиксированными значениями пикселей, и, возможно, обновите эту функцию при изменении ориентации (если пользователь переключается с книжного на альбомный или наоборот).

Как бы я написал этот код?

0 ответов

Другие вопросы по тегам