Preview Frame Sizes

[reefki]

Currently the preview frame width are based on tailor_get_registered_media_queries but the height is static for example mobile is 480px.

My theme's media queries are quite different, for mobile max width is 480px instead of 320px and so on, so I filtered them out with:

function mytheme_tailor_media_queries($media_queries) {
    $media_queries['desktop'] = array(
        'label' =>  __('Desktop', 'textdomain'),
        'min'   =>  '1024px',
        'max'   =>  '',
    );
    
    $media_queries['tablet'] = array(
        'label' =>  __('Tablet', 'textdomain'),
        'min'   =>  '481px',
        'max'   =>  '1023px',
    );

    $media_queries['mobile'] = array(
        'label' => __('Mobile', 'textdomain'),
        'min'   =>  '',
        'max'   =>  '480px',
    );

    return $media_queries;
}

add_filter('tailor_get_registered_media_queries', 'mytheme_tailor_media_queries');

The thing that very annoyed that the preview frame size is become 480x480 of pixels. I feel like previewing on an apple watch instead of a mobile phone.

I think it's better to make preview frame size fixed, e.g 320x480 of pixel for mobile regardless what size is defined on registered media queries. This way it's also possible to add another preview mode e.g Mobile and Tablet landscape because the sizes are static and not depends on registered media queries.

Otherwise you can use this simple aspect ratio formula to calculate the height using javascript:

(original height / original width) x new width = new height

// Calculate frame size for mobile based on registered media query
let height = (480 / 320) * 480;
// height = 720

[reefki]

@andrew-worsfold any though on this issue?

[andrew-worsfold]

@reefki -

I agree with your recommendation. Allowing changes to the defined media queries to flow through to all areas of the app (in addition to just the preview window) is on my list of things to do 😄