ios(safari)浏览器,使用100vh遇到的问题和修改方法。
ios(safari)浏览器,使用100vh遇到的问题和修改方法。

ios(safari)浏览器,使用100vh遇到的问题和修改方法。

做个pdf的预览,容器的高度需要设置为100vh,发现在ios(safari)浏览器显示的时候,浏览器的底部工具栏总是会挡住底下的一部分,只有工具栏隐藏或者向上滚动的时候才能看到。

ios(safari)浏览器,使用100vh遇到的问题和修改方法。插图

问题原因

没找到相关官方的问题,从知乎上搜到一个解释,觉得合理,就当是原因吧:在Safari上工作时,该团队努力只在必要时显示按钮栏。他们的目标是尽可能给网站更多的空间,这就是为什么按钮栏在滚动时隐藏。这导致了一个关于如何处理视口高度的艰难决定。它会

  1. 每次工具条隐藏和显示时更改高度。
  2. 使视口高度保持不变,并让按钮栏覆盖视口的一部分。

解决办法

1. JS+CSS(自用)

大概思路,监听页面的resize 事件,获取页面的innerHeight,动态设置高度。

2. CSS -webkit-fill-available

首先理解 -webkit-fill-available 这个CSS3 属性。大概意思时 自动填满剩余的空间 具体使用就是以下

遇到的问题

1. 只加上这个的话,我这儿遇到一个问题就是当工具栏隐藏时,页面底部会有一段空白区域。

ios(safari)浏览器,使用100vh遇到的问题和修改方法。插图1

解决办法: 加上视口的安全区域的判断就可以了

ios(safari)浏览器,使用100vh遇到的问题和修改方法。插图2

2. height 百分比不生效,只能使用flex布局或grid布局(有一些问题需要结局)。

ios(safari)浏览器,使用100vh遇到的问题和修改方法。插图3

 

Visits: 749

发表回复