Adjust the Device Preview sizes used in the WP 4.5 Customizer

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.