Diskuze: kód pouze pro pc verzi

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Petr Fiedler

Člen

Petr Fiedler:11.12.2017 22:35

Zdravím, mám část kódu v jquery, kterou nechci zobrazovat pro mobilní zařízení. Jak to udělat?

Odpovědět

11.12.2017 22:35

Alexej Haman

Člen

Alexej Haman:11.12.2017 22:45

if (window.innerWidth < 960) {
    //sem dej svůj kód
}

Nahoru Odpovědět

11.12.2017 22:45

Dominik Gavrecký

Tvůrce

Dominik Gavrecký:11.12.2017 22:46

To nie je najkrajšie riešenie ...

Nahoru Odpovědět

11.12.2017 22:46

Hlupák nie je ten kto niečo nevie, hlupákom sa stávaš v momente keď sa na to bojíš opýtať.

Dominik Gavrecký

Tvůrce

Dominik Gavrecký:11.12.2017 22:46

Detekuj a spracuj

https://stackoverflow.com/…ce-in-jquery

Nahoru Odpovědět

11.12.2017 22:46

Hlupák nie je ten kto niečo nevie, hlupákom sa stávaš v momente keď sa na to bojíš opýtať.

Petr Fiedler

Člen

Petr Fiedler:11.12.2017 23:08

Nakonec jsem to udělal takto. Je to v pohodě? Mně to funguje.

if (window.innerWidth > 760) {
    //kod
}

Nahoru Odpovědět

11.12.2017 23:08

Dominik Gavrecký

Tvůrce

Dominik Gavrecký:11.12.2017 23:21

Poslal by som ti link len sa k nemu neviem dohľadať. Technika ide stale do predu a mobily/tablety su dnes väčšie a väčšie preto tento spôsob nie je doporučovan

Nahoru Odpovědět

11.12.2017 23:21

Hlupák nie je ten kto niečo nevie, hlupákom sa stávaš v momente keď sa na to bojíš opýtať.

Petr Fiedler

Člen

Petr Fiedler:11.12.2017 23:47

V mém případě jsem ten kód schovával kvůli malé velikosti displaye, pokud by však byla velikost větší než jsem nastavil, ničemu by to nevadilo.

Nahoru Odpovědět

11.12.2017 23:47

Erik Šťastný

Člen

Erik Šťastný:12.12.2017 8:41

Nejspíš to funguje pro tvůj příklad, ale neodpovídá to tvému zadání "Pro mobilní zařízení".

Podmínka

if (mobileDevice)

nebo

if (window.size < xx)

je rozdíl!

Editováno 12.12.2017 8:41

Nahoru Odpovědět

12.12.2017 8:41

Člen

:12.12.2017 13:34

Ak napríklad používaš Bootstrap a máš v ňom zadefinovaý breakpoint pre mobilnú verziu na 768px a menej, tak v javascripte môžeš použíť napríklad takýto kód - omnoho efektívnejší ako počúvať na udalosť resize:

function mediaChanged (mql) {
  if (mql.matches) {
    // kód pre mobilnú verziu
  } else {
    // kód pre desktopovú verziu
  }
}

var mql = window.matchMedia('(max-width: 768px)')

mediaChanged(mql)
mql.addListener(mediaChanged)

Editováno 12.12.2017 13:35

Nahoru Odpovědět

12.12.2017 13:34

Věnceslav Kabanos

Člen

Věnceslav Kabanos:12.12.2017 16:08

Ahoj,

onehda jsem řešil podobný problém u kolegy a detekování mobilního zařízení podle šířky bych v dnešní době, velkých displejů s vysokým rozližením nedoporučoval. Spíše bych volil nějakou z metod rozpoznání prohlížeče např.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {

// kod pro mobily

}

Samozřejmě těch prohlížečů existuje více, třeba si určit preferované.

Nebo se taky nabízí možnost detekovat, zda-li zařízení podporuje TouchEvent, což ale taky není 100% řešení (lze pořídit dotykové obrazovky, některé notebooky mají dotykový displej už běžně a to by mohlo zlobit).

function IsMobile () {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}

Možná by se dalo pošpekulovat ještě nad elegantnějším řešením, jak kdysi říkal náš soudruh učitel: kreativitě se meze nekladou.

V. Kabanos

Nahoru Odpovědět

12.12.2017 16:08

Člen

:12.12.2017 19:38

Celé CSS media queries sú založené na detekcii mobilov skrz rozlíšenie obrazovky. A môj príklad je proste využitie media queries v JS, presne na to to aj celé vzniklo. A to aj vlastne potrebuješ. Tie tvoje testy majú priveľké riziko, že nezobrazíš nejaký obsah, lebo si bude skript myslieť, že je na mobile, lebo má touch events a pritom môže ísť o notebook, alebo all-in-one počítač... Proste ak chceš detekovať mobil, na to sú tu proste media queries v CSS a JS. Všetko ostatné je príliš nespoľahlivé.

Nahoru Odpovědět

12.12.2017 19:38

Marian Benčat

Člen

Marian Benčat:13.1.2018 17:58

Já si dovolím trošku nesouhlasit.

Podlě mš se tu míchají dvě věci dohromady:

Detekovat mobil = detekce platformy
Detekovat rozlišení = detekovat rozlišení.

To, o kterou variantu tady jde.. zalezi na tom, co si tazatel opravdu preje.. Pokud mu jde o to, neco zobrazit z DUVODU toho, ze by to na malem displeji bylo nepouzitelne, pak je to vždy složité.. protože jak tu někdo již psal.. Už i mobily dneska bohužel mají UHD displeje.. a tedy můžou mít 4k rozlišení a v případě, že se budeme orientovat podle media queries, to bude stejně nepoužitelné, protože to bude mít 0.5cm na displeji.

Todle je taokvá past no :-) Imho právě proto přicházejí s tím, že chtějí spíše dělat stránky podle DPI, než samotného rozlišení, protože pro reálné použití, je toto mnohem důležitější informace, než rozlišení - logicky,.. 1000px muze mit 2cm, nebo taky 1 metr :-)

Možná ale třeba chce opravdu dělat něco na mobilu, co na desktopu nechce - třeba volat něco přes android webview a jeho api, nebo podobný backdoor by design.

Nahoru Odpovědět

13.1.2018 17:58

Totalitní admini..

Petr Fiedler

Člen

Petr Fiedler:13.1.2018 18:42

Mně právě šlo o detekování menšího displaye, protože jsem udělal sticky menu a to menu ještě k tomu změnilo svou formu na mobilu, takže ve výsledku to na mobilu zabralo celou stránku a nešlo v tom menu sjet níž, protože bylo sticky. Takže kdyby byl display větší, aby se tam menu vešlo celé, nebyl by žádnej problém. V tomto případě už mi je jedno na jakém zařízení uživatel je. MOžná sem otázku zadal nepřesně, protože sem si myslel, že je na to jedna jednoduchá odpověď

Nahoru Odpovědět

13.1.2018 18:42

Člen

:13.1.2018 19:25

v případě, že se budeme orientovat podle media queries, to bude stejně nepoužitelné, protože to bude mít 0.5cm na displeji

Že zrovna ty napíšeš taký nezmysel, som nečakal...

Je to zrovna naopak. JEDINE ak sa budeš orientovať podľa media queries, bude výsledok použiteľný a nikdy to nebude mať 0.5cm, lebo počet CSS pixelov nemá nič s počtom fyzických pixelov.

Presnejšie, počet CSS pixelov je rovný počtu fyzických pixelov deleno devicePixelRatio. Tento pomer je displej od displeja iný, podľa DPI, rozmerov a pod., práve za účelom, aby to, čo má na desktope 2cm, malo aj na mobilnom displeji s väčším DPI rovnako 2cm.

Nahoru Odpovědět

13.1.2018 19:25

Marian Benčat

Člen

Marian Benčat:13.1.2018 23:10

Máš pravdu, řekl jsem pěknou hloupost, dal bych si dislike kdyby to šlo :-)

600 pixelu, nemusí být 600 fyzických pixelu (právě díky DPR) - proto se pouziva pro ruznou nevektorovu grafiku dppx selector v media queries. (neco podobneho jsem chtel napsat, nez jsem to tak posral :-) )

Nahoru Odpovědět

13.1.2018 23:10

Totalitní admini..

Člen

:14.1.2018 16:22

V poho, ja som Ti ani downvote nedal, veď aj majster tesár sa utne.

Nahoru Odpovědět

14.1.2018 16:22

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 16 zpráv z 16.

Nejčastěji vyhledáváné

Diskuze: kód pouze pro pc verzi