javascript - 带有故事书的移动仿真反应

Question

我正在尝试在使用故事书构建的反应组件上测试我的触摸屏滑动事件侦听器，但我似乎无法让正确的移动仿真工作。我附加到窗口宽度断点的样式更改在物理调整窗口大小时起作用，但是在 chrome 设备模拟器或手机上查看 iframe 模式时，它看起来就像桌面站点的一个小版本。它似乎也不适用于我的滑动动画。我对此进行了大量的谷歌搜索，我设法找到的只是一个故事书插件来操纵视口（https://www.npmjs.com/package/@storybook/addon-viewport）。我对开发仅限移动设备的选项（如触摸屏滑动）非常陌生，因此将不胜感激任何帮助！

标签： javascriptreactjsswipetouchscreenstorybook

Answer 1

我发现问题出在元标记上。要使移动仿真正常工作，您必须在.storybook文件夹中添加一个名为preview-head.html并在文件中放置的文件，<meta name="viewport" content="width=device-width, initial-scale=1">然后才能使仿真正常工作，将组件视为 iframe。