Archiv štítku: android

Detekce polohovacích zařízení

Pomocí @media můžete vytvořit responzivní layout v závislosti na šířce obrazovky, čímž můžete celkem dobře poznat, jestli uživatel pracuje na mobilu, tabletu nebo desktopu a podle toho uzpůsobit další prvky (např. větší ikony na mobilu).

V posledních letech ale narážíme na zařízení, která se této definici vymykají. Např. Note zařízení, která mají mobilní displej (320px), ale jdou ovládat hodně přesným perem. Nebo naopak dotykové monitory, které mají 4k rozlišení, ale ovládají se pouze prstem (takže na 16x16px ikonu se prakticky nedá kliknout). Navíc některá zařízení jsou již schopna detekovat ukázání prstem (hover) nebo sílu stisku (3D touch).

Pokračování textu Detekce polohovacích zařízení

CSS rychle a efektivně

Taky pořád čtete, jak optimalizovat CSS tím, že je spojíte do jednoho velkého souboru, který načtete v hlavičce HTML stránky?

No, Google si teď uvědomil, že to není tak úplně nejlepší a snaží se Chrome (a tedy i Operu a Safari) přepsat tak, aby se – světe div se – choval stejně jako Internet Explorer. Vývojáři Microsoftu totiž do IE (ať už záměrně nebo nechtěně) zakomponovali mechanismus, který umožňuje načítat CSS efektivněji po částech.

Pokračování textu CSS rychle a efektivně

Favicon, aneb jedna ikona nestačí

Od roku 1999 umějí prohlížeče, počínaje tehdy vydaným IE5, zobrazovat ikonu webu, tzv. favicon.

Původně šlo o 16x16px obrázek uložený ve speciálním, Microsoftem vytvořeným, formátu obsahujícím BMP obrázek a masku průhlednosti (známý jako *.ICO). Od té doby se ale hodně změnilo a s malou ikonou si již nevystačíte.
Pokračování textu Favicon, aneb jedna ikona nestačí

Responzivní obrázky na míru prohlížeči

Webkit nyní podporuje tzv. Client Hints („rady od klienta“), pomocí kterých můžete na serveru připravit obrázky a ostatní zdroje tak, aby se co nejlépe hodily pro příslušný prohlížeč nebo zařízení.

Když prohlížeč požádáte, může v každém požadavku poslat údaje o rozlišení a rychlosti připojení zařízení, takže budete přesně vědět, co si můžete dovolit stáhnout a zobrazit, aby to neovlivnilo rychlost zobrazení a kvalitu stránky.

Pokračování textu Responzivní obrázky na míru prohlížeči

Proč má stránka žere baterie?

V dnešní době je responzivní web důležitou součástí každé firemní stránky. A dá se předpokládat, že takový responzivní web bude hlavně zobrazován na mobilních zařízeních jako jsou chytré telefony a tablety, které mají dost omezenou kapacitu baterie a při vydatném používání vydrží jen pár hodin.

A jistě žádného návštěvníka nepřesvědčí o kvalitách Vašich stránek nebo nabízených produktů to, že při jejich procházení se výdrž jeho baterie sníží na polovinu. Častým příznakem problémů je pomalé nebo trhané skrolování na slabších (starších) strojích a zařízeních.

Jak tedy zabránit tomu, aby Vaše stránky doslova sežrali uživatelům baterie jejich zařízení?

Pokračování textu Proč má stránka žere baterie?

Debugování Cordova aplikace na Androidu

Již víme, jak vzdáleně debugovat Chrome na zařízeních s Android.

Pokud máte aplikaci napsanou pomocí knihovny Cordova, která využívá WebView jádro pro zobrazování HTML obsahu, můžete v ní taktéž zapnout vzdálené debugování.

Stačí do onCreate() metody vaší aplikace přidat tento kód:

if(
    Build.VERSION.SDK_INT >=
    Build.VERSION_CODES.KITKAT) {
        this.appView
          .setWebContentsDebuggingEnabled(true);
}

Z kódu je vidět, že debugování je dostupné jen v API 4.4 a výše (momentálně tedy 4.4.x a 5.0.x), takže musíte mít nový nebo updatovaný telefon (nebo testovat na nejnovějších emulátorech), ale i tak je to určitě velká pomoc, pokud potřebujete ověřit, jak vypadá DOM vygenerovaný pro aplikaci nebo které JavaScripty se spouští za běhu aplikace.

Třída Build se nachází v API, takže budete potřebovat naimportovat příslušnou knihovnu:

import android.os.Build;

//není potřeba, pokud již máte:
import android.os.*;
//nebo
import android.*;

Testování localhostu na mobilních zařízeních

Máte na svém vývojářském počítači (s Windows) zprovozněnou testovací verzi webu a potřebujete ji otestovat na (fyzickém) mobilním zařízení? Stačí správně vše nastavit a můžete testovat.

Námět článku převzat z: http://conceptdev.blogspot.cz/2009/01/monitoring-iphone-web-traffic-with.html

Pokračování textu Testování localhostu na mobilních zařízeních

Responzivní načítání obrázků

V moderním a mobilním webu často narážíme na problém s tím, jak velké načítat obrázky.

Sice máme HD (1080p) … a v roce 2014 i QHD (1440p) a od roku 2015 dokonce UHD (4K, což odpovídá 2160p, ale už se tak neuvádí) … displeje, které zvládnou zobrazit opravdu kvalitní obrázky, ale na druhou stranu jsou tyto displeje často malé (4″ – 5″ mobilní telefony) nebo se jsou sledovány z velké vzdálenosti (~50″ UHD/4K televize sledované z několika metrů), takže zobrazit v HD/4K např. graf nebo mindmapu může skončit nečitelnou pavučinou. Navíc velmi často se stává, že se s HD telefonem připojujete přes 3G nebo dokonce GPRS/EDGE a pak takové načtení HD obrázku trvá věčnost.

HTML5 specifikace na to myslí a přináší hned dvě tři možnosti, jak to vyřešit. A samozřejmě existují ještě 2 CSS3 možnosti. Pokračování textu Responzivní načítání obrázků

Debugování Opera Mobile na Androidu

Opera Mobile pro Android (neplést s Opera Mini nebo Opera Classic) využívá pro debugování stejný princip jako Chrome – nejprve si tedy budete muset zprovoznit debugování Chrome na Android.

Pak spusťte na Androidu aplikaci Opera (testováno s verzí 19) a zadejte url opera://debug/ a zaškrtněte Enable. Pokračování textu Debugování Opera Mobile na Androidu