我在我的应用程序中有一个表单设计器,为了用户体验的目的,我需要给用户这个能力来改变视口并查看表单在实际表单中的外观。
我正在使用Bootstrap 3来设计表单,并使用col和row类来管理布局。表单中有4个带有视口图标的按钮,如桌面,平板电脑,横向平板电脑和手机。
当用户点击这些按钮时,我会向容器div添加所需的类并使用宽度属性调整其大小。但是当窗口宽度发生变化时,Bootstrap不会检测到这些变化,也不会响应div的变化,因为它只会根据窗口宽度进行响应(例如媒体查询)。
下面是CSS样式:
.edit__container {
&.container--lg {
width: 100%;
}
&.container--md {
width: 80%;
}
&.container--sm {
width: 60%;
}
&.container--xs {
width: 30%;
}
}
我尝试用JavaScript更改viewport meta标签,并将宽度设置为200或更大,但不起作用。另一种尝试是使用jQuery更改窗口宽度,但没有成功。请注意,我不能在表单中使用iframe。