¿Cuáles son los puntos de quiebre (breakpoints) predeterminados en WordPress?
Cuando visitas tu sitio y haces clic en personalizar, puedes cambiar el diseño de tu sitio web para sus correspondientes vistas de Tablet y Móvil. ¿Cuáles son exactamente los puntos de quiebre predeterminados establecidos por WordPress para Escritorio, Tablet y Móvil? Si es posible, ¿puedo cambiar estos valores predeterminados?

Los anchos de la ventana de vista previa en el Personalizador cuando se seleccionan las vistas previas de tablet y dispositivo móvil son 720px
y 320px
respectivamente.
Estos solo están definidos en CSS, por lo que no hay ningún gancho (hook) o similar para sobrescribir específicamente esos tamaños. Los estilos originales están definidos en /wp-admin/css/themes.css
, y tienen este aspecto:
.preview-mobile .wp-full-overlay-main {
margin: auto 0 auto -160px;
width: 320px;
height: 480px;
max-height: 100%;
max-width: 100%;
left: 50%;
}
.preview-tablet .wp-full-overlay-main {
margin: auto 0 auto -360px;
width: 720px; /* El tamaño se basa aproximadamente en un dispositivo "tablet" típico. Intencionalmente ambiguo - esto no representa ningún dispositivo en particular con precisión. */
height: 1080px;
max-height: 100%;
max-width: 100%;
left: 50%;
}
Por lo tanto, si realmente deseas cambiarlos, podrías hacerlo cargando estilos personalizados para el personalizador, así:
function wpse_340269_customizer_styles() {
?>
<style>
.preview-tablet .wp-full-overlay-main {
width: 680px;
}
.preview-mobile .wp-full-overlay-main {
width: 375px;
}
</style>
<?php
}
add_action( 'customize_controls_print_styles', 'wpse_340269_customizer_styles' );
Dicho todo esto, la redacción de tu pregunta sugiere que podría haber un malentendido sobre los puntos de ruptura (breakpoints), el diseño responsivo y el papel de WordPress en ambos.
Esos tamaños mencionados son meramente tamaños para previsualizar el sitio desde el personalizador. No tienen absolutamente ningún efecto en el front-end del sitio web. La forma en que tu sitio responde a dispositivos más pequeños no tiene nada que ver con estos tamaños, y está determinada completamente por tu tema.
En cuanto a los puntos de ruptura, estos tampoco tienen nada que ver con estos tamaños. Los 'puntos de ruptura' ni siquiera son algo real. Con CSS, los autores de temas pueden cambiar los estilos de su tema según el tamaño de pantalla del dispositivo del usuario. Algunos desarrolladores decidirán 2 o 3 tamaños de pantalla específicos en los que todos los elementos de su diseño cambiarán, pero esto es simplemente una elección del autor. Otros desarrolladores pueden tener elementos fluidos que no cambian muchas veces en absoluto, mientras que otros elementos en la página podrían construirse para cambiar en tamaños completamente diferentes a todo lo demás porque así se ve mejor.
El punto es que los temas no tienen necesariamente 3 diseños específicos en los mismos 3 tamaños específicos. Hay un número casi infinito de formas en que un desarrollador/diseñador podría elegir cambiar su diseño a través de los tamaños de pantalla.
Otra cosa a considerar que es relevante para tu pregunta es que no todos los dispositivos móviles y tablets tienen el mismo tamaño de pantalla. Si modificas la vista previa de tablet a 768 píxeles, podrías obtener una vista previa más precisa de un iPad (pero no de un iPad Pro), pero eso no cambia el hecho de que algunas pantallas de tablets siguen siendo más pequeñas, ¡así que probablemente todavía necesitas asegurarte de que todo se vea bien a 720 píxeles de ancho de todos modos!
Ten en cuenta que estos botones son solo para que los usuarios finales hagan vistas previas rápidas de los cambios que se realizan en el personalizador. A esos usuarios no se les deben mostrar vistas previas de dispositivos específicos. Los botones están destinados a vistas previas de clases de dispositivos. Por lo tanto, el botón de tablet debería mostrar una tablet promedio, no una específica.
Además, los botones de vista previa no están destinados al desarrollo. Si estás desarrollando un nuevo tema, entonces deberías utilizar las herramientas de desarrollo de tu navegador, y asegurarte de que tu sitio se vea bien en todos y cada uno de los tamaños de pantalla posibles. Eso es diseño responsivo.

Parece que Gutenberg no está de acuerdo. Cuando WordPress emprendió el proyecto Gutenberg, inadvertida o involuntariamente abrieron la caja de Pandora. Los bloques, como los bloques de columna y navegación, requieren CSS responsivo. Los bloques principales de WordPress ahora incluyen consultas @media. La separación entre contenido y lógica de aplicación se ha roto. Rota de manera elegante, pero rota al fin y al cabo.
