WP 4.5介绍了Device Preview in the Customizer 而且它很容易使用。单击三个图标中的一个，以各种预先确定的大小查看您的站点。

台式机版本将始终占据您屏幕的全部空间。平板电脑版本设置为6英寸x 9英寸。移动版本设置为320px 480px。您还可以使用customize_previewable_devices

add_filter( \'customize_previewable_devices\', \'__return_empty_array\' );

欲了解更多品种更好的原因，请参阅http://design.google.com/resizer/.

设备定位解决方案基于以下答案Luis Sanz, 我认为这个解决方案更完整一些。它涉及添加新设备、设置图标和调整列表中设备的顺序。

虽然我认为设置这些窗口的高度以显示纵向和横向设置之间的差异很有趣，但我真的认为100% 在大多数情况下，身高是最好的。

图标当前正在使用Dashicons 但我也可以看到将这些替换为建议断点的东西，而不是将来的设备。[SM, M, L, XL]

/**
 *   Determine the device view size and icons in Customizer
 */
function wpse_20160503_adjust_customizer_responsive_sizes() {

    $mobile_margin_left = \'-240px\'; //Half of -$mobile_width
    $mobile_width = \'480px\';
    $mobile_height = \'720px\';

    $mobile_landscape_width = \'720px\';
    $mobile_landscape_height = \'480px\';

    $tablet_width = \'720px\';
    $tablet_height = \'1080px\';

    $tablet_landscape_width = \'1080px\';
    $tablet_landscape_height = \'720px\';

    ?>
    <style>
        .wp-customizer .preview-mobile .wp-full-overlay-main {
            margin-left: <?php echo $mobile_margin_left; ?>;
            width: <?php echo $mobile_width; ?>;
            height: <?php echo $mobile_height; ?>;
        }

        .wp-customizer .preview-mobile-landscape .wp-full-overlay-main {

            width: <?php echo $mobile_landscape_width; ?>;
            height: <?php echo $mobile_landscape_height; ?>;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .wp-customizer .preview-tablet .wp-full-overlay-main {

            width: <?php echo $tablet_width; ?>;
            height: <?php echo $tablet_height; ?>;
        }

        .wp-customizer .preview-tablet-landscape .wp-full-overlay-main {

            width: <?php echo $tablet_landscape_width; ?>;
            height: <?php echo $tablet_landscape_height; ?>;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .wp-full-overlay-footer .devices .preview-tablet-landscape:before {
            content: "\\f167";
        }

        .wp-full-overlay-footer .devices .preview-mobile-landscape:before {
            content: "\\f167";
        }
    </style>
    <?php

}

add_action( \'customize_controls_print_styles\', \'wpse_20160503_adjust_customizer_responsive_sizes\' );

/**
 *   Set device button settings and order
 */
function wpse_20160503_filter_customize_previewable_devices( $devices )
{
    $custom_devices[ \'desktop\' ] = $devices[ \'desktop\' ];
    $custom_devices[ \'tablet\' ] = $devices[ \'tablet\' ];
    $custom_devices[ \'tablet-landscape\' ] = array (
            \'label\' => __( \'Enter tablet landscape preview mode\' ), \'default\' => false,
    );
    $custom_devices[ \'mobile\' ] = $devices[ \'mobile\' ];
    $custom_devices[ \'mobile-landscape\' ] = array (
            \'label\' => __( \'Enter mobile landscape preview mode\' ), \'default\' => false,
    );

    foreach ( $devices as $device => $settings ) {
        if ( ! isset( $custom_devices[ $device ] ) ) {
            $custom_devices[ $device ] = $settings;
        }
    }

    return $custom_devices;
}

add_filter( \'customize_previewable_devices\', \'wpse_20160503_filter_customize_previewable_devices\' );

介质查询解决方案这里是一个利用断点的示例，如[L|M|S] 基于之前的设备定向解决方案，无需额外的图示符。这些显然是对你的主题的媒体提问的补充。

/**
 * Determine the size of the devices and icons in Customizer
 */
function wpse_20160504_adjust_customizer_responsive_sizes() {
    ?>
    <style>
        .wp-customizer .preview-small .wp-full-overlay-main {
            width: 320px;
            height: 100%;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        .wp-customizer .preview-medium .wp-full-overlay-main {
            width: 768px;
            height: 100%;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        .wp-customizer .preview-large .wp-full-overlay-main {
            width: 1224px;
            height: 100%;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        .wp-full-overlay-footer .devices .preview-small:before {
            content: "S";
        }

        .wp-full-overlay-footer .devices .preview-medium:before {
            content: "M";
        }

        .wp-full-overlay-footer .devices .preview-large:before {
            content: "L";
        }

    </style>
    <?php
}

add_action( \'customize_controls_print_styles\', \'wpse_20160504_adjust_customizer_responsive_sizes\' );

/**
 * Add device sizes to customizer
 */
function wpse_20160504_filter_customize_previewable_devices( $devices )
{
    $custom_devices[ \'desktop\' ] = $devices[ \'desktop\' ];
    $custom_devices[ \'large\' ] = array ( \'label\' => __( \'Large\' )  );
    $custom_devices[ \'medium\' ] = array ( \'label\' => __( \'Medium\' )  );
    $custom_devices[ \'small\' ] = array ( \'label\' => __( \'Small\' )  );

    return $custom_devices;
}

add_filter( \'customize_previewable_devices\', \'wpse_20160504_filter_customize_previewable_devices\' );