Adjust the Device Preview sizes used in the WP 4.5 Customizer

Question

WP 4.5 introduced the Device Preview in the Customizer and it's pretty easy to use. Click one of three icons and see your site at various (predetermined) sizes.

• The desktop version will always fill up 100% of your screen
• The tablet version is set to 6-inch x 9-inch
• The mobile version is set to 320px x 480px

You can also filter the devices available or remove them alltogether using customize_previewable_devices

add_filter( 'customize_previewable_devices', '__return_empty_array' );

There is a lot of discussion @#31195, but assuming you can add/remove previewable devices where do you determine the sizes for these views?

For a reference on why more variety is better, please refer to http://design.google.com/resizer/.

DEVICE ORIENTATION SOLUTION

Based on the answer by Luis Sanz, I think this solution is a bit more complete. It addresses adding new devices, setting icons, and adjusting the ordering of the devices in the list.

While I think it's interesting to set the height of these windows to show the difference between portrait and landscape settings, I really think 100% height is best for most cases.

The icons are currently using Dashicons but I could also see swapping these out for something that suggests breakpoints instead of devices down the road. [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' );

MEDIA QUERY SOLUTION

Here is an example of utilizing break points like [L|M|S] based on the previous device orientation solution and without requiring extra glyphs. These should obviously compliment your theme's media queries.

/**
 * 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' );

Answer 1

Both the mobile and the tablet dimensions are defined in the admin's themes.css file. The javascript that runs when the buttons are triggered is just for adding and removing classes and not for dealing with the sizes themselves.

So it shouldn't be difficult to override the dimensions by adding some extra css. To keep it simple, I'm using customize_controls_print_styles to inline some styles but it can also be done by enqueueing a css file.

<?php

    /*
        Plugin Name: Adjust Customizer responsive sizes
        Description: Allows to change the mobile and tablet preview dimensions in the WP Customizer
        Version: 0.1
        Author: Your Name
        Author URI: http://www.yourwebsite.com/
    */

    if ( ! defined( 'ABSPATH' ) ) exit;

    function wpse_223684_adjust_customizer_responsive_sizes() {

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

        $tablet_margin_left = '-540px'; //Half of -$tablet_width
        $tablet_width = '1080px';
        $tablet_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-tablet .wp-full-overlay-main {
                margin-left: <?php echo $tablet_margin_left; ?>;
                width: <?php echo $tablet_width; ?>;
                height: <?php echo $tablet_height; ?>;
            }
        </style>
<?php

    }

    add_action( 'customize_controls_print_styles', 'wpse_223684_adjust_customizer_responsive_sizes' );

?>

Default sizes are 320x480px for mobile and 720x1080px for tablet.

EDIT 16/04/26: Reflect the changes in the default tablet sizes the WordPress 4.5.1 release introduced.

Answer 2

A great solution by Luis Sanz. Worked great except for media queries that involve landscape and portrait queries as the iFrame doesn't scale. To get around this I used Luis' script and added

.wp-customizer .preview-tablet .wp-full-overlay-main iframe {
    height: <?php echo $tablet_height; ?> !important;
}
.wp-customizer .preview-mobile .wp-full-overlay-main iframe {
    height: <?php echo $mobile_height; ?> !important;
}

I added this to the end of the section.