У меня есть проблема, которую я пытался решить различными способами, но у меня ничего не вышло. В настоящее время я работаю над приложением pwa, которое требует запуска на нескольких устройствах. Пока он отлично работает на всех устройствах, пока я не начал тестировать его на эмуляторе iPhone. Я обнаружил, что наличие выемки и пространства внизу экрана портит дизайн приложения. Вскоре после этого я обнаружил силу env (safe-inset-area-bottom / top / left / right), которая позволила мне обойти эту проблему простым способом. Проблема заключалась в том, что один из элементов (навигация внизу) требует определенного нижнего отступа по сравнению с нижней частью экрана. На большинстве устройств это выглядит нормально, но на IOS из-за дополнительного заполнения от env (safe-inset-area-bottom) оно неприлично велико. Поэтому я попытался удалить заполнение на IOS устройствах различными способами, которые я перечислю здесь.
1-я попытка
Использовать каскадный стиль
заполнение -низ: 1.8rem;
padding-bottom: env (safe-inset-area-bottom);
Не удалось, потому что safe-inset-area-bottom действительно имеет значение 0 Chrome.
2-я попытка
Использовать запасной вариант
padding-bottom: env (safe-inset-area-bottom, 1.8rem);
Неуспешно, потому что снова безопасная inset-area-bottom оценивается в 0
3-я попытка
Использование S CSS при условии
.toolbar {@if env (safe-inset-area-bottom) == 0 {padding-bottom: 1.8rem; } @else {padding-bottom: 0}}
Этот метод, который я пробовал в другом сценарии ios как таковой: использование переменной для хранения переменной env и проверки условия на ней , поместив условие if в миксин и включив миксин в класс css.
4-я попытка
Я пытался настроить таргетинг только на мобильные устройства Safari со следующими css
@ support (-webkit-touch-callout: none) {padding-bottom: 0; } @supports not (-webkit-touch-callout: none) {padding-bottom: 1.8rem; }
Опять же, это не удалось
Кто-нибудь знает какой-нибудь простой способ справиться с этим?