Насколько я могу судить, невозможно использовать медиа-запрос максимальной высоты из-за Chrome 67 на iOS.
Проблема заключается в том, что при прокрутке пользователей вверх и вниз Chrome добавляет и удаляет адресную строку. При этом он изменяет максимальную высоту, что означает, что если вы используете медиа-запрос максимальной высоты для изменения высоты чего-либо, то что-либо ниже чего-либо будет прыгать, когда пользователи прокручивают вверх или вниз.
Например, у меня есть изображение размером 300x500, но на коротком экране я хотел убедиться, что оно не заполняет экран, поэтому у меня есть что-то вроде этого
@media (max-height: 700px) {
img {
max-height: 400px;
}
}
Эффективно, «если экран короткий, изображение слишком короткое»
Но на Chrome iOS происходит то, что на iPhone X при добавлении и удалении адресной строки запускается медиазапрос
Если на странице есть несколько изображений и пользователь находится рядом с нижней частью, когда они прокручивают страницу вверх и вниз, они перескочат на половину экрана или более.
Обратите внимание, что в Safari на iOS такой проблемы нет, хотя адресная строка также появляется и исчезает.
Я могу выбрать другое max-height для запуска, но, конечно, то же самое может произойти на любом телефоне любой высоты, так что похоже на использование max-height для запуска, безнадежно сломан?
Есть ли способ добиться того, что я пытаюсь сделать?