[英]iOS ui hides the bottom of the page. How do I make the whole page responsive and its bottom always visible when iOS bottom menu is hidden and shown?
There is an example in jsfiddle . jsfiddle中有一个示例 。 The "bottom_menu" class should be displayed at the bottom of the page.
“ bottom_menu”类应显示在页面底部。 The text of the "content" class should be displayed at the center of the "bottom_menu" div.
“ content”类的文本应显示在“ bottom_menu” div的中心。 But this text should be slightly higher then the center of the phone screen, because the whole phone screen height equals "bottom_menu" div height + "bottom_menu" div height.
但是此文本应该比电话屏幕的中心略高,因为整个电话屏幕的高度等于“ bottom_menu” div高度+“ bottom_menu” div高度。
The problem is that when I open this page on iphone, ios native ui hides "bottom_menu" div until I do scroll down. 问题是,当我在iPhone上打开此页面时,iOS本机ui会隐藏“ bottom_menu” div,直到我向下滚动为止。
I need to make the "content" div some height reducing to make the "bottom_menu" visible when ios native bototm menu is shown. 当显示ios原生bototm菜单时,我需要使“内容” div降低一些高度,以使“ bottom_menu”可见。
I tried to solve it by making the "bottom_menu" position:fixed; 我试图通过设置“ bottom_menu”位置来解决此问题: and bottop: 0px;
和bottop:0px; but in this case the text of "contant" div displays right at the phone screen center (not at the content_height/2 - bottom_menu_height).
但是在这种情况下,“ contant” div文本将显示在电话屏幕中心(而不是content_height / 2-bottom_menu_height)。
How do I make this "bottom_menu" alveys visible by scaling the "content" div when ios native bottom menu hidden and shown? 当隐藏和显示ios本机底部菜单时,如何通过缩放“内容” div使该“ bottom_menu”始终可见?
The html is: 的HTML是:
<div class="wrapper">
<p>It's scrolleble content</p>
<div class="bottom_menu">Content on the bottom of the page</div>
</div>
And the CSS is: CSS是:
.wrapper {
background: green;
height: 200vh;
}
.bottom_menu {
background: rebeccapurple;
height: 44px;
position: fixed;
bottom: 0px;
}
p {
background: red;
height: 100vh;
}
One approach might be detect browser and change your bottom property in .bottom_menu, take a look at these links. 一种方法是检测浏览器并在.bottom_menu中更改您的bottom属性,查看这些链接。
How to detect Safari, Chrome, IE, Firefox and Opera browser? 如何检测Safari,Chrome,IE,Firefox和Opera浏览器?
How to detect my browser version and operating system using JavaScript? 如何使用JavaScript检测我的浏览器版本和操作系统?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.