Pobieranie zawartości dokumentu w PX

pytanie zadane 5 marca 2022 w JavaScript przez Patyczakus Nowicjusz (190 p.)

Witam, przychodzę z pytaniem jak mogę pobrać wartość dokumentu w px. Zamierzam przerobić po raz trzeci swą stronę internetową (ala pocztówka) i chciałbym dodać możliwość strony internetowej na telefon (więc nie wiem, czy kategoria oraz tagi są poprawne)

Specjalnie jest dana kategoria JavaScript, więc komentarze typu: "a nie możesz zrobić w CSS?" będą ignorowane.

O co mi dokładnie chodzi? Otóż jeżeli wartość w px będzie mniejsza/równa 500px, to wtedy dodaje do tagu <body> klasę "phone". Najlepiej, aby był pisany w czystym JS-ie, w ostateczności jQuery lub coś innego. Będę wdzięczny!

1 odpowiedź

odpowiedź 5 marca 2022 przez ScriptyChris Mędrzec (190,190 p.)

Specjalnie jest dana kategoria JavaScript, więc komentarze typu: "a nie możesz zrobić w CSS?" będą ignorowane.

Nie rozumiem skąd niechęć do użycia CSS, co wydaje się dość naturalne w takiej sytuacji, ale jak wolisz.

Możesz użyć metody matchMedia i property matches na zwróconym przez nią obiekcie, żeby sprawdzić czy dokument spełnia podane media query i wtedy nadać odpowiednią klasę. Przykład:

const mqList = window.matchMedia('(max-width: 500px)'); // ustaw regułę

if (mqList.matches) { // sprawdź czy reguła jest spełniona
  document.body.classList.add('phone'); // nadaj klasę
}

komentarz 5 marca 2022 przez Patyczakus Nowicjusz (190 p.)

Dziękuję za odpowiedź

A co do CSS - @media nie działa u mnie najlepiej, więc jest spowodowane użyciem JS-a. Jeszcze miałem plan oddzielenia poszczególnych elementów, a klasą według mnie łatwiej zrobić.

Ale każdy ma swe koncepcje i swe pomysły, nie można komuś też za dużo narzucać.

komentarz 5 marca 2022 przez ScriptyChris Mędrzec (190,190 p.)

A co do CSS - @media nie działa u mnie najlepiej

Może więc najpierw spróbuj rozwiązać ten problem, a dopiero potem szukaj rozwiązania na około? ;) Twoja obecna sytuacja wygląda mi na tzw. problem XY.

komentarz 5 marca 2022 przez Patyczakus Nowicjusz (190 p.)

Jak można przeczytać ze strony:

After much interaction and wasted time, it finally becomes clear that the user really wants help with X, and that Y wasn't even a suitable solution for X.

Jest to fałszem, Y (czyli wersja z JS-em) jest dla mnie odpowiednia. Fakt, da się zrobić w CSS (inaczej X), ale chyba wolę mieć oddzielną klasę od tego niż podpinać @media i tylko się zastanawiać, czy będzie wszystko dobrze. Ale wezmę i spróbuję też i z rozwiązaniem tego problemu.