简体繁体 English

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

[英]mobile emulation with storybook react

原文 2019-02-13 13:30:22 0 1 javascript/ reactjs/ swipe/ touchscreen/ storybook

I'm trying to test my touchscreen swipe event listeners on a react component built with storybook, and I can't seem to get proper mobile emulation to work. 我正在尝试在使用故事书构建的react组件上测试我的触摸屏滑动事件侦听器，但似乎无法获得适当的移动仿真来正常工作。 The style changes I have attached to window width breakpoints work upon physically resizing the window, but when viewing the iframe mode in either the chrome device emulator, or on my phone, it just looks like a tiny version of the desktop site. 我附加到窗口宽度断点的样式更改会在物理上调整窗口大小时起作用，但是在chrome设备仿真器或手机上查看iframe模式时，它看起来只是桌面站点的一个小版本。 It doesnt seem to work with my swipe animations either. 它似乎也不适合我的滑动动画。 I've done tons of googling on this, and all I've managed to find is a storybook add-on to manipulate the viewport ( https://www.npmjs.com/package/@storybook/addon-viewport ). 我已经完成了大量的谷歌搜索工作，而我设法找到的是一个故事书插件来操纵视口（ https://www.npmjs.com/package/@storybook/addon-viewport ）。 I'm pretty new to developing for mobile-only options like touchscreen swipe, so any help would be greatly appreciated! 我对于开发仅用于移动设备的选项（如触摸屏滑动）非常陌生，因此，非常感谢您的帮助！

1 个解决方案

i discovered that the problem was with meta tags. 我发现问题出在元标记上。 to get mobile emulation to work, you have to in the .storybook folder, add a file named preview-head.html and in the file put <meta name="viewport" content="width=device-width, initial-scale=1"> then to get the emulation to work correctly, view the component as an iframe. .storybook移动设备仿真正常工作，您必须在.storybook文件夹中添加一个名为preview-head.html的文件，然后在文件中放入<meta name="viewport" content="width=device-width, initial-scale=1">然后，要使仿真正常工作，请将组件视为iframe。