Change Customizer Responsive Device Sizes

GeneratePress

/*===========================================================
=            CUSTOMIZER RESPONSIVE PREVIEW SIZES            =
===========================================================*/
// GP Premium has weird mobile sizes in the customizer. This changes it to iPhone XS portrait and iPad portrait (769px)

if( is_plugin_active( 'gp-premium/gp-premium.php' ) ) {
   add_filter( 'generate_customizer_device_preview_sizes', function() {
      return array(
         'tablet' => 769,
         'mobile' => 375,
      );
   } );
}

Vanilla WordPress

<?php 

/*===========================================================
=            CUSTOMIZER RESPONSIVE PREVIEW SIZES            =
===========================================================*/
// The current WordPress customizer has outdated device preview sizes. This changes the previews to iPhone XS and iPad Pro sizes

add_action( 'customize_controls_print_styles', 'kpry_customizer_responsive_sizes' );
function kpry_customizer_responsive_sizes() {

    // Mobile
    $mobile_margin_left = '-184.5px'; //Half of -$mobile_width
    $mobile_width = '369px';
    $mobile_height = '800px';

    // Tablet
    $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
}