SvelteKit 在初始页面加载时将 window.innerWidth 返回为未定义

Question

我有两个独立的组件，一个用于移动设备，另一个用于桌面。一次只能显示一个组件，具体取决于用户浏览器窗口的宽度。这是我的浓缩版:

<script>
    let innerWidth
</script>

<svelte:window bind:innerWidth />

<p>
  Inner Width: {innerWidth}
</p>

{#if innerWidth > 800}
    Desktop Content
{:else}
    Mobile Content
{/if}

我注意到当我加载页面时，{innerWidth}从 undefined 快速切换到适当的值。对于桌面用户，这是一个问题，因为在评估时会显示移动内容 {#if innerWidth > 800} , Svelte 有 innerWidth = undefined .

有趣的是，只有当我直接加载页面时才会出现这个问题。如果我在/subpage 上有这个功能，那么如果我访问/index 然后访问/subpage，预期的功能就会起作用。

有没有办法在不识别 undefined 的情况下在初始页面加载时返回适当的值？ ？我想避免使用 CSS 媒体查询，但这是最后的手段。

Answer 1

Is there a way to return the appropriate value on initial page load without it recognizing undefined?

不是默认配置，因为 SvelteKit 在第一个页面加载时使用服务器端渲染。无法在服务器上获取该信息。

如果您想防止显示错误的内容，您还可以将您的内容包装在一个额外的 #if 中。

{#if innerWidth != null}
    {#if innerWidth > 800}
        Desktop Content
    {:else}
        Mobile Content
    {/if}
{/if}