Storybook自定义Viewport后在预览里显示不对，配置哪里错了？

宇航提问于 2026-02-08 03:50:27 阅读 44

工具

我在Storybook里想给组件添加iPhone 14的视口预设，按照文档在manager.js里写了配置：

viewports: {
  'iphone-14': {
    name: 'iPhone 14',
    styles: { width: '390px', height: '844px' },
    type: 'mobile'
  }
}

但预览面板选择后显示的尺寸却是375×812，和iPhone 12一样。重启Storybook也没用，是不是配置位置不对？或者需要额外设置.storybook preview文件？

我来解答赞 11 收藏

反馈

2 条解答

馨阳酱~ Lv1

你这个配置应该放在preview.js里，manager.js里配置viewport不生效。我之前这样搞的，直接贴代码：

export const parameters = {

  viewport: {

    viewports: {

      'iphone-14': {

        name: 'iPhone 14',

        styles: { width: '390px', height: '844px' },

        type: 'mobile'

      }

    }

  }

}

2026-02-08 08:08

小瑞雪 Lv1

我也遇到过类似的情况，后来发现从 Storybook 6 开始，manager.js 里配置视口已经不推荐了，应该在 .storybook/preview.js 里通过 parameters 来设置。你现在的配置其实没错，只是放错了地方。

你只需要把那段 viewports 的配置移到 .storybook/preview.js 文件里，作为 parameters.viewport 的一部分就行。比如：

export const parameters = {

  viewport: {

    viewports: {

      'iphone-14': {

        name: 'iPhone 14',

        styles: { width: '390px', height: '844px' },

        type: 'mobile'

      }

    }

  }

}

这样改完之后重启一下 Storybook 应该就能生效了。我当时也卡在这，翻了半天 issue 才明白是配置位置变了。建议看看控制台有没有 warning，有时候它会提示你配置项没被识别。

2026-02-08 04:00