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

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

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

5f40b71a1f354e2c800a31cf8befb0f4tplv-k3u1fbpfcp-zoom-in-crop-mark3024000.awebp_

问题原因

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

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

解决办法

1. JS+CSS(自用)

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

2. CSS -webkit-fill-available

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

遇到的问题

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

d76d2df2a48b4b6399a77255fe5d8288tplv-k3u1fbpfcp-zoom-in-crop-mark3024000.awebp_

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

3be71bf46f6c4f2ca5ab4265a8a6936ftplv-k3u1fbpfcp-zoom-in-crop-mark3024000.awebp_

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

c12f102fa1df4ac08357e0c77ca81987tplv-k3u1fbpfcp-zoom-in-crop-mark3024000.awebp_

 

点击数:162

发表回复