Detekcja pozycji elementu po zmianie orientacji ekranu (urządzenia mobilne)

Potrzebuję mieć pewność że po zmianie orientacji ekranu ( 'orientationchange' event ) rozmiar konkretnego elementu zostanie przeliczony ( getBoundingClientRect() zwróci odpowiedni rozmiar ) zanim wywołam funkcje.

Jedyne rozwiązania jakie znalazłem (w sieci) to manualne przeliczenie rozmiaru konkretnego elementu lub ustawienie setTimeout. Oba te rozwiązania są co najmniej złe.

Mam sporo zależności w CSSie odnośnie różnych konfiguracji ekranowych i nie chcę komplikować tego jeszcze bardziej. Ustawienie setTimeout w moim przypadku na 500ms czasem zdąży przeliczyć konkretny element a czasem po prostu nie, nie mówiąc o tym że zapewne jest to zależne od konkretnego urządzenia oraz przeglądarki.

Funkcja jest nieskomplikowana i ma na celu ustawienie pozycji elementu "szczegółów" bazując na pozycji "obrazu":

adjustDetailsPosition: function () {
                this.$refs.details.style.opacity = '0'

                if(!isMobileDevice(false)) { //desktop
                    // {...}
                } else { //mobile devices
                    const pictureRect = this.$refs.picture.getBoundingClientRect()

                    this.$refs.details.style.top = pictureRect.top + pictureRect.height + 'px'
                }

                this.$refs.details.style.opacity = '1'
            }

Macie na to jakieś pomysły?

A dlaczego nie użyjesz css-a i relatywnego liczenia pozycji jednego elementu względem innego?

Freja Draco napisał(a):

A dlaczego nie użyjesz css-a i relatywnego liczenia pozycji jednego elementu względem innego?

No chyba będę to musiał tak ugryźć, sęk w tym, że mam problem z tym iż komponent jest zupełnie inaczej wyświetlany w przypadku urządzeń mobilnych a zupełnie inaczej w przypadku pc.

Problem jest też ze sprawdzeniem czy urządzenie jest 'mobilką' tylko i wyłącznie przez 'css @media' bo niektóre duże tablety i tak tam wpadają, a z js przy użyciu biblioteki dobrze idzie to wyłapać, a np. przycisk menu mobilnego jest ustawiony w sposób 'position: fixed;' i łatwiej mi było logikę zrobić w JS aby sprawnie policzyć pozycję obrazu i "szczegółów", zależnie od tego czy urządzenie jest tabletem czy też nie.

Jest szansa że trochę "przekombinowałem" z tym rozwiązaniem.

Matt91111 napisał(a):

Freja Draco napisał(a):

A dlaczego nie użyjesz css-a i relatywnego liczenia pozycji jednego elementu względem innego?

No chyba będę to musiał tak ugryźć, sęk w tym, że mam problem z tym iż komponent jest zupełnie inaczej wyświetlany w przypadku urządzeń mobilnych a zupełnie inaczej w przypadku pc.

Problem jest też ze sprawdzeniem czy urządzenie jest 'mobilką' tylko i wyłącznie przez 'css @media' bo niektóre duże tablety i tak tam wpadają, a z js przy użyciu biblioteki dobrze idzie to wyłapać, a np. przycisk menu mobilnego jest ustawiony w sposób 'position: fixed;' i łatwiej mi było logikę zrobić w JS aby sprawnie policzyć pozycję obrazu i "szczegółów", zależnie od tego czy urządzenie jest tabletem czy też nie.

Jest szansa że trochę "przekombinowałem" z tym rozwiązaniem.

Jeśli JS-em łatwiej ci wykryć typ użądzenia, to sugeruję zrobić kawałek CSS warunkowo ładowany za pomocą JS.
A późniejsze zmiany wyglądu zależnie od wymmiarów/orientacji obsługiwać już regułami CSS.