如何更改导航栏高度只在iOS设备？

c8ib6hqw 于 2023-05-19 发布在 iOS

关注(0)|答案(1)|浏览(138)

你好（对不起我的英语）
我为我的网站在页面底部建立了一个导航栏，我在iOS中看到（它处于响应模式）
当我开始向下滚动的导航栏开始变小，因为他下来了一点，问题是我如何可以给我的导航栏的高度，当我向下滚动，以及如何使它只为IOS设备（该网站的React，如果它的问题）
这是我为导航栏编写的代码

.navbar-footer {
    display: none;
    position: fixed;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 65px;
    background-color: #fff;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
  }```

ios

来源：https://stackoverflow.com/questions/76211501/how-to-change-the-navbar-height-only-at-ios-devices

1条答案

按热度按时间

yizd12fk1#

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */ 
}

它之所以有效，是因为只有Safari移动的实现了-webkit-touch-callout：https://developer.mozilla.org/en-US/docs/Web/CSS/[developer.mozilla][1]-webkit-touch-callout
请注意，@supports在IE中不起作用。IE将跳过上面的@support块。更多信息，请参阅https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/。建议不要使用@supports，因为这不是原因。
iOS上的Chrome或Firefox怎么样？实际上，这些只是WebKit渲染引擎的外观。因此，只要iOS策略不改变，上述方法在iOS上随处可见。请参见App Store审核指南中的2.5.6。
警告：iOS可能会在未来几年的任何新iOS版本中删除对此的支持。你应该更努力地尝试不需要上面的CSS。这个答案的早期版本使用-webkit-overflow-scrolling，但新的iOS版本删除了它。正如一位评论者指出的，还有其他选择：前往支持的CSS属性并搜索“iOS上的Safari”。

赞(0）回复(0）举报 2023-05-19

我来回答

如何更改导航栏高度只在iOS设备？

1条答案

相关问题

热门标签

最新问答