我正在构建一个完整的网页应用程序，并且它在Chrome中运行得非常漂亮，但是在Safari浏览器移动版中，它变得诡异。 这是因为safari mobile的导航栏位于顶部，另一个位于底部。 我如何为他们创建我的页面帐户？ 我已经研究了几个星期，并尝试了所有建议。 我希望这里有人能够提供帮助。
如何在没有顶部和底部酒吧的情况下获得身高？ 事实上，我并不是真的想要吧，但据我所知，除了用户将应用程序添加到主屏幕之外，没有办法摆脱它们。 如果我的用户还没有将它添加到他们的首页，我必须考虑酒吧的高度。 我必须解释它们的原因是我的页面有一张地图，为了显示它必须有一个固定的高度，它不能弯曲。 我还在屏幕的顶部和底部都有按钮和用户控件，它们必须始终可见。
现在发生的情况是，有时内容会跳到导航栏的下方，因此这些控件变得无法使用。
我想将页面高度设置为导航栏和状态栏之间的高度，如果显示，则显示AVAILABLE屏幕高度。 寻找一个CSS或JavaScript解决方案。
任何人都可以帮忙吗？
使用ios 11.2.6进行测试。
I'm building a full-page web app and it works beautifully in chrome, but in safari mobile it goes wonky. This is because safari mobile has the navigation bar on top and another bar on the bottom. How can I make my page account for them? I've been researching this for weeks and have tried every suggestion. I'm hoping someone here can help.
How do you get the height with and without the top and bottom bars? In truth, I don't really want either bar, but as far as I know there isn't a way to get rid of them except for the user to add the app to their home screen. If my user doesn't have it added to their front page yet, I have to account for the height of the bars. The reason I have to account for them is my page has a map, which must have a fixed height in order to show, it can't be flex. I also have buttons and user controls on both the top and the bottom of the screen, which must always be visible.
What is happening now is that sometimes the content jumps UNDER the navigation bar and therefore those controls become unusable.
I want to set the page height to be the height BETWEEN the nav bar, and status bar, if they are showing, the AVAILABLE screen height. Looking for either a css or javascript solution.
Can anybody help?
Testing with ios 11.2.6.
最满意答案
这整个事情绝对很臭。 我没有真正的解决方案 - 不认为有人会这样做 - 但这就是我所知道的。
CSS 100vh是Safari的视口可以达到的最大高度，即隐藏酒吧。 所以如果酒吧显示，它太大了，事情可能会在你看到的酒吧下面。
CSS position: fixed; top: 0; bottom: 0 position: fixed; top: 0; bottom: 0 position: fixed; top: 0; bottom: 0适合当前没有小节的视口大小，当小节显示和隐藏时会改变，所以它更有用。 但是你不能把所有的position: fixed都position: fixed下来position: fixed 。
window.innerHeight与100vh相同，因此不太好。
所以我知道从JS获得正确高度的唯一方法就是创建一个position: fixed; top: 0; bottom: 0 position: fixed; top: 0; bottom: 0 position: fixed; top: 0; bottom: 0元素并测量它。 然后，您可以将该高度应用回其他元素以使它们适合屏幕上的哦，但是当条显示或隐藏时，高度将会改变。 哎呀。
有时候最好是去核，把整个网站放在一个position:fixed div和overflow: hidden在身体上，这样文档就不会滚动，酒吧也不会隐藏。
如果body正在overflow: hidden ，则document.documentElement.clientHeight也会获得没有条的高度。
Safari HQ的男孩说这是全部设计，他们打算保持这种方式，Chrome也会很快实施。 真是一团糟。
This whole thing absolutely stinks. I don't really have a solution - don't think anyone does - but here's what I know about it.
CSS 100vh is the maximum height Safari's viewport can be, i.e. with bars hidden. So if the bars are showing, it's too big and things might go under the bars like you're seeing.
CSS position: fixed; top: 0; bottom: 0 fits to the current size of the viewport without bars and will change when the bars show and hide, so it's a lot more useful. But you can't make everything position: fixed.
window.innerHeight is the same as 100vh so that's not much good.
So the only way I know to get the correct height from JS is to make a position: fixed; top: 0; bottom: 0 element and measure it. Then you can apply that height back to other elements to make them fit on the screen, oh, but the height will change when the bars show or hide. Heck.
Sometimes it's best to go nuclear and put the whole site in a position:fixed div, and overflow: hidden on the body, so that the document never scrolls and the bars never hide.
If the body is overflow: hidden, document.documentElement.clientHeight also gets the height without bars.
The boys at Safari HQ say this is all by design and they intend to keep it this way, and Chrome will be implementing it soon too. What a mess.
更多推荐
发布评论