CSS 如何在iPhone上隐藏Safari移动浏览器的底部按钮栏

在本文中，我们将介绍如何使用CSS隐藏iPhone上的Safari移动浏览器的底部按钮栏。在iPhone上，Safari浏览器在底部有一个按钮栏，包含了前进、后退、刷新等功能按钮。有时候，我们希望隐藏这个按钮栏，以便更好地定制我们的网页。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用CSS隐藏Safari移动浏览器的底部按钮栏

要隐藏Safari移动浏览器的底部按钮栏，我们可以使用CSS的-webkit-overflow-scrolling属性，将其设置为touch。下面是代码示例：

body {
  -webkit-overflow-scrolling: touch;
}

这段代码将应用于整个网页的<body>元素，通过将页面滚动容器的滚动模式设置为touch，可以隐藏Safari移动浏览器的底部按钮栏。需要注意的是，这个属性只在Safari中有效，不适用于其他浏览器。

示例说明

下面我们通过一个示例说明如何隐藏Safari移动浏览器的底部按钮栏。

<!DOCTYPE https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<head>
  <style>
    body {
      -webkit-overflow-scrolling: touch;
    }
  </style>
</head>
<body>
  <h1>隐藏Safari移动浏览器的底部按钮栏</h1>
  <p>这是一个示例网页。</p>
</body>
</html>

在上面的示例中，我们使用了<style>标签将CSS样式直接写在了网页中。当在iPhone的Safari浏览器中打开这个网页时，你会发现底部的按钮栏已经被成功隐藏了。