html - 在 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;
}

铬合金：

iPhone 7

即使在 iOS 上，我应该怎么做才能正确查看它？

标签： htmlioscss

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">