Custom width for mobile view in visual editor

You can achieve your goal by using a custom script to override the default behavior.Create a Custom JavaScript File: Add a custom JavaScript file to your theme or plugin. This file will contain the code to override the getCanvasWidth method.Create a file named custom-editor-width.js and add the following code:

(function() {
    const originalGetCanvasWidth = wp.data.select('core/block-editor').getCanvasWidth;

    wp.data.select('core/block-editor').getCanvasWidth = function() {
        const width = originalGetCanvasWidth.apply(this, arguments);

        // Define your custom widths here
        const customWidths = {
            mobile: 480, // Example width for mobile
            tablet: 768  // Example width for tablet
        };

        // Apply custom widths based on the current viewport
        if (window.innerWidth <= customWidths.mobile) {
            return customWidths.mobile;
        } else if (window.innerWidth <= customWidths.tablet) {
            return customWidths.tablet;
        }

        return width;
    };
})();

Hi Alberto @ixistudio, I found a hack for this!

I think 360 px is a very outdated width for mobile devices, perhaps they didn’t change it because they are focused on full site editor. I had looking for a solution fo a while too, and finally found one.

If you work with a child theme, you can add a couple of lines.

In functions.php

function my_admin_theme_style() {
    wp_enqueue_style('my-admin-style', 'https://......../wp-content/themes/....../admin.css');
}
add_action('admin_enqueue_scripts', 'my_admin_theme_style', 8 );

Don’t forget to fill ……..

In admin.css

/* Mobile preview */
.block-editor-iframe__scale-container iframe {
   width: 560px !important;
}

It worked for me, I hope others found useful.
Saludos desde Argentina.