Quali sono i breakpoint predefiniti in WordPress?

Le larghezze della finestra di anteprima nel Personalizzatore quando si selezionano le anteprime per tablet e dispositivi mobili sono rispettivamente 720px e 320px.

Questi valori sono definiti solo in CSS, quindi non c'è alcun hook o altro metodo per sovrascriverli specificamente. Gli stili originali sono definiti in /wp-admin/css/themes.css e appaiono così:

.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; /* La dimensione è basata approssimativamente su un tipico dispositivo "tablet". Intenzionalmente ambigua - non rappresenta precisamente alcun dispositivo specifico. */
    height: 1080px;
    max-height: 100%;
    max-width: 100%;
    left: 50%;
}

Quindi, se volessi davvero modificarli, potresti farlo caricando stili personalizzati per il Personalizzatore, in questo modo:

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' );

Detto questo, la formulazione della tua domanda suggerisce che potrebbe esserci un malinteso riguardo ai breakpoint, al design responsivo e al ruolo di WordPress in entrambi.

Le dimensioni sopra indicate sono semplicemente dimensioni per visualizzare l'anteprima del sito dal Personalizzatore. Non hanno assolutamente alcun effetto sul front-end del sito web. Come il tuo sito risponde ai dispositivi più piccoli non ha nulla a che fare con queste dimensioni ed è determinato interamente dal tuo tema.

Per quanto riguarda i breakpoint, anche questi non hanno nulla a che fare con queste dimensioni. I 'breakpoint' non sono nemmeno una cosa reale. Con il CSS, gli autori di temi possono modificare gli stili del loro tema in base alla dimensione dello schermo del dispositivo dell'utente. Alcuni sviluppatori decidono 2 o 3 dimensioni specifiche dello schermo in cui tutti gli elementi del loro design cambiano, ma questa è semplicemente una scelta dell'autore. Altri sviluppatori potrebbero avere elementi fluidi che non cambiano affatto molte volte, mentre altri elementi della pagina potrebbero essere costruiti per cambiare a dimensioni completamente diverse rispetto a tutto il resto perché è così che sembra migliore.

Il punto è che i temi non hanno necessariamente tutti 3 layout specifici alle stesse 3 dimensioni specifiche. Ci sono quasi infinite modalità con cui uno sviluppatore/designer potrebbe scegliere di modificare il proprio design in base alle dimensioni dello schermo.

L'altra cosa da considerare, rilevante per la tua domanda, è che non tutti i dispositivi mobili e tablet hanno la stessa dimensione dello schermo. Se modifichi l'anteprima del tablet a 768 pixel, potresti ottenere un'anteprima più accurata di un iPad (ma non di un iPad Pro), ma questo non cambia il fatto che alcuni schermi di tablet sono ancora più piccoli, quindi probabilmente devi comunque assicurarti che tutto appaia bene a 720 pixel di larghezza!

Tieni presente che questi pulsanti sono solo per gli utenti finali per effettuare anteprime rapide delle modifiche apportate nel Personalizzatore. A questi utenti non dovrebbero essere mostrate anteprime di dispositivi specifici. I pulsanti sono pensati per anteprime di classi di dispositivi. Quindi il pulsante del tablet dovrebbe mostrare un tablet medio, non uno specifico.

Inoltre, i pulsanti di anteprima non sono pensati per lo sviluppo. Se stai sviluppando un nuovo tema, dovresti utilizzare gli strumenti di sviluppo del tuo browser e assicurarti che il tuo sito appaia bene in ogni possibile dimensione dello schermo. Questo è il design responsivo.