Wyświetlanie komunikatu tylko w wersji mobilnej - rozwiązano

Dla specjalistów Webmastering
#1

Tak jak w tytule posta Czy poda mi ktoś może link / wujcia google sprawdziłem na tyle ile mogłem/ do rozwiązania mojego problemu
Chodzi o wyświetlenie znikającego powiedzmy po 5 sek komunikatu który wyświetlał by się tylko w wersji mobilnej po otwarciu strony - najlepiej gdyby to był wąski pasek div.
Wymodziłem co prawda taki kod javascript jak poniżej

window.setTimeout(“closeHelpDiv();”, 6200);

function closeHelpDiv(){
document.getElementById(“helpdiv”).style.display=" none";
}

gdzie napis wyświetlany jest w /div id=“helpdiv”>Looking ? - scroll down</div/
Działanie sprawdzić można pod tym linkiem Znikający komunikat
Nie mogę sobie jednak poradzić z wyświetlaniem tylko w wersji mobile. :frowning:
css-y jakie próbowałem zastosować nie działają :frowning:
Może ktoś pomóc?

#2

Detekcja urządzeń mobilnych jest dość problematyczna. Jest wiele na to metod, żadna nie jest w pełni skuteczna i każda ma słabe strony. Im bardziej skuteczna metoda tym bardziej obciąża serwer lub przeglądarkę.
Bez problemu wygooglujesz najprostsze rozwiązania wpisując w google How to detect mobile devices in <JS | CSS | PHP>. Znajdziesz również gotowe skrypty które mają to realizować.

Gdy miałem publikować post do głowy przyszła mi jeszcze jedna opcja - mianowicie CSS i media queries, tylko, że gdy odpowiednio zmniejszysz okno przeglądarki to div pojawi się również na desktopie. Idealne to nie jest ale chyba najlżejsze z możliwych rozwiązań.

#3

ten zanikający div ma sie pokazać tylko przez jakieś góra 5 sek tak jak to jest zapodane linkiem. Możesz przybliżyć kodem twoje rozwiązanie ?

#4 
.helpdiv {
    display: block;
}

@media (min-width: 992px) {
    .helpdiv {
        display: none;
    }
}
#5

Za pomocą @media w css da się to na spokojnie ogarnąć…

#6

Jak ma coś na hacka z “wyświetlaj wersje komputerową” witryny…?

#7

Moja propozycja, w komentarzach masz uzasadnienie co i jak:

https://jsfiddle.net/w7nm29b6/

#8

W tym cały sęk że wszelkie próby z css kończą się bez efektu

#9

Podałeś bardzo ciekawe rozwiązanie. W css masz wartość (min-width: 576px) , a ja chciałbym aby ten komunikat wyświetlał się czasowo tylko dla @media (max-width: 600px); tak jak podałem z podglądem w JSFiddle w pierwszym moim poście. Twój przykład działa chyba? niejako odwrotnie

#10

Podał przykład z dużą szerokością 576px i więcej.

zrób max-width: 640px

https://jsfiddle.net/vjay0o6d/ i powinno tylko na telefonach i bardzo zmniejszonych oknach na komputerze wyświetlać.

Ale pamiętaj, to nie zadziała z opcją “wymuś wersje komputerową”.

#11

Testuję podobne rozwiązania już od kilku dni /w miarę wolnego czasu/ i wszystkie nie działają tak jak bym chciał - co opisałem w pierwszym poście. Chodzi o to że mam stronę przygotowaną pod wersję desktop i ta sama robi się mobilna po zmniejszeniu ekranu.
Mam rozszerzoną wersję o dodatkowe menu z prawej strony z tego menu - podstawowa wersja mtk2_91042 / kolorowanie na screenie - testowe/
Napis ukazywać ma się w wersji mobilnej nad środkową fotką. Gdzieś na codepen widziałem rozwiązanie podobnego problemu rozeznania szerokości ekranu oparte oparte o taki zapis / if ($(this).width() < 768) / ale strona mi “uciekła” i nie mogę jej znów trafić
Przetestuję to rozwiązanie - zobaczymy .
Odezwę się

#12

Zdaje się że o to chodziło … tyle złego w tym że odnośnik do jQery musi być blisko [< body >] :frowning: / a nie na końcu / i sam skrypt tez musi być wysoko :frowning:
Samo testowanie też będzie dłuższe

1 polubienie
#13

Gdzie taka wersja jest dostępna :wink: /? Sam napis w wersji na laptopa się nie ukazuje :slight_smile:

#14

Na telefonie jest w opcjach “Wersja na komputer” (chrome) / “Wersja na komputery” (firefox).

I tego css nie wykryje (wyłącza się viewport lub ma inną wartość i dodatkowo wymuszany jest UA jakby odpalić na telefonie GNU/linux).

#15

:wink: Ваня понял, что происходит :wink:
Z tym że… u wani wypasionego… telefona niet
Sam używasz takiej funkcji ?