固定在顶部的0：正确的0：项目在虚拟键盘存在时无法正确显示在手机上，如何解决？

Question

此处的代码：

body {}
#holder {
transform: translate3d(0,0,0);
      position:fixed;top:0; right:0;opacity:.5;background:black;width:60px;height:30px}

<body>
<div id="holder">
<svg version='1.1' id='L9' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='-18 40 100 100' enable-background='new 0 0 0 0' xml:space='preserve'><rect x='20' y='50' width='4' height='10' fill='#fff' transform='translate(0 13.1135)'><animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 20; 0 0' begin='0' dur='0.6s' repeatCount='indefinite'></animateTransform></rect><rect x='30' y='50' width='4' height='10' fill='#fff' transform='translate(0 13.5532)'><animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 20; 0 0' begin='0.2s' dur='0.6s' repeatCount='indefinite'></animateTransform></rect><rect x='40' y='50' width='4' height='10' fill='#fff' transform='translate(0 0.219867)'><animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 20; 0 0' begin='0.4s' dur='0.6s' repeatCount='indefinite'></animateTransform></rect></svg></div>

<p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p><p>dummy</p>
<textarea></textarea>

</body>

我正在为页面添加加载效果。加载是包含在div中的svg，我将div放在top:0，right:0和position:fixed上。

但是，如果存在虚拟键盘，则加载div不会显示在我的iPhone上。

我发现很难在StackOverflow上查看代码段，所以我制作了一张图片来演示这一点：

当用户调用键盘时，加载div会被“推”到上方。但是，并非每次都会发生这种情况，在几次尝试中，可能会有20％的机会使它正确（负载不会超过此值）。

对此有任何解决方法吗？

Answer 1

您可以在CSS中使用媒体查询来编写特定的代码，当高度为X数量（X等于手机上的屏幕高度减去键盘高度时，X等于）。您可能已经编写了一些自定义CSS，但可以使用。

固定在顶部的0：正确的0：项目在虚拟键盘存在时无法正确显示在手机上，如何解决？

问题描述投票：0回答：1

1个回答

最新问题

固定在顶部的0：正确的0：项目在虚拟键盘存在时无法正确显示在手机上，如何解决？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1