7

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' );
  • why would you need it? does anyone use a smartphone which is not iphone4 and a tablet which is not ipad? ;) Seriously, it is probably better to work with the chrome tools and just add 300px to the width in order for the costumizer to have display place. – Mark Kaplun Apr 14 '16 at 14:06
  • This is obviously a general comment, things need to be tested on the devices and browsers they supposed to work on. The costumizer is not a replacement for that. This feature in general is a good excuse for non technical people to not have a staging enviroment because "they can test things with the costumizer". IMHO you are doing disservice to your clients if you don't point to them that this is not a true replacement for many reasons. – Mark Kaplun Apr 14 '16 at 14:47
  • BTW, I think the question is valid and useful, but people that come here to do that should keep my comments in mind. – Mark Kaplun Apr 14 '16 at 14:49
  • there was never any "why" in my comments – Mark Kaplun Apr 14 '16 at 15:31
  • 'Why' is actually a great question to ask; there are plenty of questions posted where a user asks "how do I do this?", they're given the answer, and it turns out to not solve their problem. Because no-one asked why, the real problem was never considered... just different ways to accomplish one solution which may or may not have been correct in the first place. Don't take it personally, and no need to fight - we're all trying to help anyone who comes across this post. – Tim Malone Apr 16 '16 at 6:15
2

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.

  • @jgraup, you're welcome. Your additions in the question using the customize_previewable_devices hook are very useful. Thanks! – Luis Sanz May 4 '16 at 8:42
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.