浮动按钮在iOS上无法正确查看

Question

实际上，我正在尝试向我的网站添加一个仅在移动设备上显示的浮动按钮，问题是在chrome调试中，如果我将视图设置为移动，则可以正确显示，但是当我在iPhone 7的位置甚至视图都不尽如人意。

代码如下：

HTML

  <a id="floatButton" href="#" class="float d-none">
            <i class="far fa-2x fa-address-book my-float"></i>
  </a>

CSS

.float{
    z-index:500;
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#007bff;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    box-shadow: 0px 0px 3px #999;
}

.my-float{
    margin-top:13px;
}

Chrome：

iPhone 7

即使在iOS上也应如何正确查看？

Answer 1

由于position: fixed

，这是一个问题

许多移动浏览器故意不支持position：fixed;理由是固定元素可能会在小屏幕上发生干扰。

尝试使用：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">