Сохранение содержимого над нижней панелью на Mobile Safari iOS 8

Question

Я знаю, что minimum-ui больше не поддерживается на iOS8. Но у меня есть некоторый контент, закрепленный на нижней части веб-страницы.

Высота страницы установлена ​​на 100vh, чтобы охватить весь видовой экран. Часть содержимого внизу отображается ниже нижней панели. Таким образом, пользователь должен прокрутить, чтобы увидеть этот контент.

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

Answer 1

Одним из решений может быть предоставление небольшого количества элемента padding-bottom для элемента с 100vh, чтобы оставить некоторое пространство для нижней панели iphone.

Просто используйте этот код для целевого мобильных телефонов с Safari:

@media screen and (max-width: 767px) { 
    _::-webkit-full-page-media, _:future, :root .safari_only { 
     padding-bottom: 65px; //resize 
    } 
} 

И не забудьте добавить .safari_only класса к элементу, который Вы хотите настроить таргетинг, например:

<div class='safari_only'> This div will have a padding-bottom:65px in a mobile with Safari </div> 

Одна деталь: это также повлияет на браузер Safari на устройствах Android, но, к счастью, мало кто использует Safari на устройстве Android, так или иначе, если вам это нужно, вы можете использовать другое правило css для перезаписывания этого правила на Android.