Wordpress nie ładuje zewnętrznych css na urządzeniach mobilnych

pytanie zadane 22 lutego 2021 w Systemy CMS przez daniel1806 Obywatel (1,780 p.)

Witam.

Wczoraj pobrałem i zainstalowałem na localhost'cie wordpress-5.6.1-pl_PL. Na desktopie jest ok, ale na tablecie i telefonie nie ładuje zewnętrznych styli css. Piszę własny motyw, i kiedy dodaję atrybut style, to działa poprawnie.

Ma ktoś może pomysł co może być nie tak?

Pozdrawiam.

komentarz 22 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)

na tablecie i telefonie nie ładuje zewnętrznych styli css

Jesteś pewien, że pliki ze stylami nie są ładowane - jak to sprawdzasz? Czy jak zasymulujesz urządzenie mobilne w devtoolsach to problem jest ten sam?

komentarz 22 lutego 2021 przez daniel1806 Obywatel (1,780 p.)

Jak symuluję w devtoolsach to wszystko jest ok. Natomiast na telefonie i tablecie po prostu widzę, że załadował się goły html bez żadnej stylizacji.

Można jakoś na mobilkach włączyć devtoolsy bez instalowania jakiegoś programu albo dodatku?.

Dodam jeszcze, że tabletem i telefonem wchodzę na mój localhost w mojej sieci domowej przez ip mojego komputera. Server mam postawiony na Ubuntu 20.04. Może to być problem jakichś uprawnień? Jak chodzi o katalog z Wordpressem, to ustawiłem rekursywnie na -rwxrwxrwx.

Może jeszcze kwestia współdzielenia sieci lokalnej? Sam już nie wiem :(

komentarz 22 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)

Jak symuluję w devtoolsach to wszystko jest ok. Natomiast na telefonie i tablecie po prostu widzę, że załadował się goły html bez żadnej stylizacji.

W jaki sposób Twoja apka rozpoznaje urządzenie? Raczej nie przez media query, bo tryb mobilny devtoolsów pozwoliłby na symulację problemu. Może przez UserAgent?

Można jakoś na mobilkach włączyć devtoolsy bez instalowania jakiegoś programu albo dodatku?

Z tego co wiem, to można zdalnie debugować mobilkę, ale chyba nie ma przeglądarek z dostępnymi devtoolsami na mobilki.

Możesz JS-em podpiąć się pod window na event error i wypisać na stronę ewentualne błędy. Dodatkowo podpiąłbym się analogicznie na error pod wszystkie elementy <link>, które ładują CSS'y. Wrzuć przykładowy skrypt przed </body> w HTML-u:

const testElement = document.createElement('div');
document.body.appendChild(testElement);

window.addEventListener('error', (event) => {
  testElement.innerHTML += `global error event: ${getErrorAsJSON(event)}<br>`;
})

document.querySelectorAll('link').forEach((linkItem) => {
  linkItem.addEventListener('error', (event) => {
    testElement.innerHTML += `CSS error event: ${getErrorAsJSON(event)}<br>`;
  })
})

function getErrorAsJSON(event) {
  return JSON.stringify({ message: event.message, error: event.error });
}

(w zasadzie to pod window można się podpiąć nawet na początku <head>)

komentarz 22 lutego 2021 przez daniel1806 Obywatel (1,780 p.)

Dzięki za pomoc i za skrypt :)

Niestety wyświetlił jedynie: CSS error event: {}. Przeiterowałem po całym obiekcie event w funkcji getErrorAsJSON i w ogóle nie ma kluczy message oraz error. Wszystkie te, które są mają wartość undefined.

Oczywiście wyświetla się na tablecie. Na desktopie nie ma nic.

Jeszcze pokombinuję.

komentarz 22 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)

Czyli są błędy dotyczące CSS-a, skoro pojawił się event. Zawsze to jakiś feedback.

Spróbuj zmienić implementację funkcji getErrorAsJSON na:

function getErrorAsJSON(event) {
  const error = {};

  for (let key in event) {
    error[key] = event[key];
  }

  return JSON.stringify(error);
}

Przy okazji - jakich przeglądarek używasz na tych mobilkach?

komentarz 23 lutego 2021 przez daniel1806 Obywatel (1,780 p.)

Jak chodzi o przeglądarki, to na mobilkach testowałem na Chrome i Adblocker.

To już robi się kuriozalne, więc może opiszę problem dokładniej, bo chyba w pierwszym pytaniu byłem zbyt mało szczegółowy.

Na moim laptopie mam zainstalowany Apache 2.4.41. Odpaliłem na nim kilka wirtualnych hostów, każdy na localhost, ale na różnych portach. Tego Wordpress'a mam zainstalowanego na localhost:2100. Na porcie 80 mam małą aplikacyjkę, którą sobie klepię w php. W tej mojej apce (dla porównania) css działa zawsze i w każdy sposób, a na WP tylko jak wejdę z mojego laptopa na localhost:2100.

Wczoraj wieczorem odkryłem, że problem nie dotyczy tylko urządzeń mobilnych, ale każdych, które wchodzą na adres WP przez sieć lokalną. Użyłem komputera mojej żony i wszedłem na ip mojego laptopa na port 2100 i ten sam efekt co na tablecie i telefonie. Natomiast wchodząc z dowolnego urządzenia na port 80 wyświetla się moja aplikacja, css'y się ładują, wszystko pięknie.

Dziś rano dla eksperymentu ustawiłem na routerze wirtualny serwer i przekierowałem ruch na mój laptop. Następnie przez mój publiczny ip wszedłem z zewnątrz, używając sieci komórkowej w telefonie. WP nie załadował się wcale, a moja aplikacja - jak poprzednio, ładuje się, css'y działają, wszystko ok.

Nic już z tego nie rozumiem. Czy taki WP po przeniesieniu na hosting będzie działał?

komentarz 23 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)

Hmm, jeśli ten problem występuje przy łączeniu się ze stroną po innych portach, to może przyczyną jest brak CORS? Skoro to samo dzieje się również na pełnoprawnym PC, to teraz już możesz w devtoolsach przeglądarki sprawdzić, co zwraca serwer dla zapytań o CSS-y. Przejdź do zakładki Network, znajdź request dla CSS, kliknij go i pokaż zawartość panelu Headers.

Link do dokumentacji → https://developers.google.com/web/tools/chrome-devtools/network/reference#headers

komentarz 23 lutego 2021 przez daniel1806 Obywatel (1,780 p.)

Wczoraj już czasu nie było na dokładne sprawdzanie, ale dziś to ogarnę (dopiero wieczorem, jak będę miał dostęp do drugiego komputera). Ale czy CORS nie powinien zadziałać wtedy gdy pliki css były by dociągane z innego serwera? W tym przypadku są ładowane z tego samego portu co index.php. Co więcej, dlaczego nie było żadnej reakcji przy wejściu z zewnątrz.

Tak czy inaczej zajrzę do tego wieczorem.

komentarz 23 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)

Trudno mi odpowiedzieć na to pytanie. Informacje z zakładki Headers powinny pomóc ustalić co się dzieje - czy to kwestia nieprawidłowej ścieżki do pliku, nagłówków, czy może wina serwera jeśli zwraca błąd 5xx.