Si alguna vez has entrado en la vista previa dentro de Apariencia > Personalizar, habrás visto que la presentación es de un tamaño minúsculo para los estándares actuales. Podemos modificar fácilmente el tamaño que queramos cambiando los valores en las variables $mobile_width y $mobile_height a los que queramos (mejor que el ancho no supere los 410 o 420 px). Puedes colocarlo en el archivo functions.php.
Importante: no modifiques directamente el archivo functions.php del tema que tengas instalado. Genera un tema hijo con alguno de los plugins del repositorio de WordPress y actívalo. Cuando lo tengas, entra en el functions.php del tema hijo. Una alternativa es instalar algún plugin que permite incrustar código sin problema de pérdida en la actualización del tema.
/**
* Ajustar tamaño de la vista móvil en el Personalizador (Customizer)
* Dimensiones: 360px x 760px
*/
add_action( 'customize_controls_enqueue_scripts', 'lc_customizer_vista_movil_realista' );
function lc_customizer_vista_movil_realista() {
$mobile_width = 360;
$mobile_height = 760;
$margin_left = -(int) floor( $mobile_width / 2 );
$custom_css = "
.wp-customizer .preview-mobile .wp-full-overlay-main {
width: {$mobile_width}px !important;
height: {$mobile_height}px !important;
margin-left: {$margin_left}px !important;
}
.wp-customizer .preview-mobile .wp-full-overlay-main iframe {
height: {$mobile_height}px !important;
}
";
wp_add_inline_script( 'customize-controls', sprintf(
'jQuery(document).ready(function($){ $("head").append(""); });',
preg_replace( '/\s+/', ' ', $custom_css )
) );
}
Nota técnica: Este snippet utiliza wp_add_inline_script para inyectar el CSS de la interfaz. Aunque habitualmente los estilos se gestionan desde hojas CSS dedicadas, esta estructura permite mantener el snippet en un único bloque de código listo para copiar y pegar en functions.php, garantizando además la máxima compatibilidad con editores de contenido y evitando conflictos de renderizado.