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

Question

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

Answer 1

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