在主题定制器预览中，我使用Modernizr包含某些更改页面样式的类。如果我理解正确，将设备类型更改为tablet或mobile只会更改窗口大小，但不会触发任何回调或页面重新加载。
现在，我能想到的唯一方法是在预览脚本中添加一个调整大小的侦听器，并查看新窗口尺寸与哪个设备匹配。
我想知道在预览窗口中是否有内置过滤器或触发回调的方法，以便为每个设备视图包含正确的类。
在定制器中检测设备更改(台式机、平板电脑或移动设备)
1 个回复
SO网友:Weston Ruter
是的，完成此操作的方法是在wp.customize.previewedDevice 值更改。
因此，您可以在customize_controls_enqueue_scripts 与的操作customize-controls 作为其脚本依赖项，它执行以下操作：
(function ( api ) {
api.bind( \'ready\', function() {
function sendPreviewedDevice() {
api.previewer.send( \'previewed-device\', api.previewedDevice.get() );
}
// Send the initial previewed device when preview is ready.
api.previewer.bind( \'ready\', sendPreviewedDevice );
// Send the previewed device whenever it changes.
api.previewedDevice.bind( sendPreviewedDevice );
});
}) ( wp.customize );
wp_enqueue_scripts 如果is_customize_preview() 例如：(function ( api, $ ) {
api.bind( \'preview-ready\', function() {
var previousPreviewedDevice = null;
// Listen for a previewed-device message.
api.preview.bind( \'previewed-device\', function( previewedDevice ) {
var body = $( document.body );
if ( previousPreviewedDevice ) {
body.removeClass( previousPreviewedDevice );
}
body.addClass( previewedDevice );
previousPreviewedDevice = previewedDevice;
});
});
}) ( wp.customize, jQuery );
body 元素，例如tablet.我在一个要点中把它推到了一个独立的插件中：https://gist.github.com/westonruter/b2fdf9347c8441ba9933569b15e2faa7
有关更多信息，请参阅Customizer Responsive Server-Side Components Device Preview 插件及其对应的writeup：Previewing Themes with Adaptive Designs in the Customizer. 这可能更接近您想要的，因为您似乎没有实现一个纯粹的响应主题。
结束