Care sunt breakpoint-urile implicite setate în WordPress?

Lățimile ferestrei de previzualizare în Personalizator atunci când selectați previzualizările pentru dispozitivele tabletă și mobil sunt 720px și, respectiv, 320px.

Acestea sunt definite doar în CSS, deci nu există niciun hook sau altceva pentru a suprascrie în mod specific aceste dimensiuni. Stilurile originale sunt definite în /wp-admin/css/themes.css și arată astfel:

.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; /* Dimensiunea este aproximativ bazată pe o dimensiune tipică a unui dispozitiv "tabletă". Intenționat ambiguu - acest lucru nu reprezintă exact niciun dispozitiv anume. */
    height: 1080px;
    max-height: 100%;
    max-width: 100%;
    left: 50%;
}

Deci, dacă doriți cu adevărat să le modificați, puteți face acest lucru prin încărcarea unor stiluri personalizate pentru personalizator, astfel:

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

Cu toate acestea, formularea întrebării sugerează că ar putea exista o neînțelegere despre punctele de întrerupere, designul responsive și rolul WordPress în ambele.

Aceste dimensiuni de mai sus sunt doar dimensiuni pentru previzualizarea site-ului din personalizator. Ele nu au absolut niciun efect asupra front-end-ului site-ului web. Modul în care site-ul dvs. răspunde la dispozitivele mai mici nu are nicio legătură cu aceste dimensiuni și este determinat în întregime de tema dvs.

Când vine vorba de punctele de întrerupere, acestea nu au nicio legătură cu aceste dimensiuni. "Punctele de întrerupere" nu sunt chiar un lucru real. Cu CSS, autorii temelor pot schimba stilurile temei lor în funcție de dimensiunea ecranului dispozitivului utilizatorului. Unii dezvoltatori vor decide 2 sau 3 dimensiuni specifice ale ecranului la care toate elementele designului lor se vor schimba, dar aceasta este doar o alegere a autorului. Alți dezvoltatori ar putea avea elemente fluide care nu se schimbă deloc, în timp ce alte elemente de pe pagină ar putea fi construite să se schimbe la dimensiuni complet diferite de toate celelalte, pentru că asta arată mai bine.

Ideea este că temele nu au neapărat toate 3 layout-uri specifice la aceleași 3 dimensiuni specifice. Există un număr aproape infinit de moduri în care un dezvoltator/designer ar putea alege să schimbe designul pe diferite dimensiuni de ecran.

Un alt lucru de luat în considerare, relevant pentru întrebarea dvs., este că nu toate dispozitivele mobile și tablete au aceeași dimensiune a ecranului. Dacă modificați previzualizarea tabletei la 768 de pixeli, s-ar putea să obțineți o previzualizare mai precisă a unui iPad (dar nu a unui iPad Pro), dar asta nu schimbă faptul că unele ecrane de tabletă sunt încă mai mici, așa că probabil tot trebuie să vă asigurați că totul arată bine și la 720 de pixeli lățime!

Rețineți că aceste butoane sunt doar pentru utilizatorii finali să facă previzualizări rapide ale modificărilor efectuate în personalizator. Acei utilizatori nu ar trebui să fie arătați cu previzualizări ale unor dispozitive specifice. Butoanele sunt concepute pentru previzualizări ale claselor de dispozitive. Deci, butonul tabletei ar trebui să arate o tabletă medie, nu una specifică.

De asemenea, butoanele de previzualizare nu sunt destinate dezvoltării. Dacă dezvoltați o temă nouă, ar trebui să utilizați instrumentele de dezvoltare ale browserului și să vă asigurați că site-ul arată bine la fiecare dimensiune posibilă a ecranului. Asta este designul responsive.