如何在Svelte.js网站中隐藏地址栏以最大化屏幕空间？

首先明确：桌面端浏览器几乎不允许隐藏地址栏（出于安全和用户体验考虑），这个需求主要针对移动端场景。下面是可行的方案：

1. 使用标准Meta标签（通用方案，非Svelte专属） #

这些标签是浏览器层面的标准配置，直接在页面的<head>中添加即可，Svelte项目里可以通过两种方式添加：

方式一：修改根目录的index.html #

直接在<head>里插入以下标签：

<!-- 适配移动端视口，确保页面占满屏幕 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<!-- iOS Safari：添加到主屏幕后全屏打开（无地址栏） -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 安卓部分浏览器（如Chrome）：添加到主屏幕后全屏 -->
<meta name="mobile-web-app-capable" content="yes">

方式二：在Svelte组件中用svelte:head添加 #

如果需要在特定组件中动态控制，可以用Svelte的内置组件：

<svelte:head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
</svelte:head>

2. 触发浏览器自动隐藏地址栏 #

部分移动端浏览器（如Chrome安卓版）会在页面滚动到一定程度时自动隐藏地址栏，你可以通过以下方式触发：

• 确保页面内容高度至少超过视口高度，让用户可以滚动
• 或者在页面加载时通过JS主动触发一次滚动（注意不要影响体验）：

window.addEventListener('load', () => {
  setTimeout(() => {
    window.scrollTo(0, 1);
  }, 100);
});

3. 添加Web App Manifest（推荐） #

创建一个manifest.json文件，配置后让用户将网站添加到主屏幕，打开时会以全屏模式运行（无地址栏），示例配置：

{
  "name": "你的Svelte网站",
  "short_name": "网站名称",
  "start_url": "/",
  "display": "standalone", // 关键：独立模式，无地址栏
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

然后在index.html中引入：

<link rel="manifest" href="/manifest.json">

注意事项 #

• 所有方案都依赖浏览器和系统的支持，没有100%兼容所有设备的方法
• 不要尝试用JS强制隐藏地址栏，现代浏览器都会阻止这种行为（安全限制）

内容的提问来源于stack exchange，提问作者user19441082