Когда я запускаю свой веб-сайт на iPhone X(R,S, 11), моя мобильная навигация в нижнем колонтитуле не фиксируется в нижней части, и я установил положение на фиксированной и нижней: 0px. Я добавил метатег viewport-fit = cover, но он не работает. Кто-нибудь может мне помочь?
.mobile-bottom-nav {
position: fixed;
position: -ms-device-fixed;
bottom: 0px;
height: 80px;
width: 100%;
margin-bottom: -35px;
left: 0px;
background: rgba(255, 255, 255, 0.6);
-webkit-backdrop-filter: saturate(200%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border-top: 1px solid #c5c5c5;
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
flex-direction: row;
z-index: 999;
}
Метатег ниже:
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover, user-scalable=no">
Изображение моего веб-приложения: под нижней панелью навигации отображается пустая полоса.
[
]