Návrh designu pro mobil, rozměry jsou jiné než na monitoru

Ahoj,

asi mi dosloužilo logický myšlení, protože nevim jak mam navrhovat pro mobil a tohle mi nejde do hlavy:

Na webu si určím element, který bude mít rozměry 150x20 pixelů.

Stránku otevřu na telefonu, udělám si printscreen obrazovky a když obrázek otevřu a změřím rozměry elementu, pak jsou 300x40. Proč jsou dvakrát zvětšené? Ještě vím, že to asi bude mít na svědomí DPI, ale absolutně to nemůžu pochopit.

Pokud dám elementu obrázek na pozadí, pak udělám printscreen na telefonu, tak je obrázek rozmazaný, protože je dvakrát takový, než je jeho skutečná velikost...

Co s tím, dokázal by mi to někdo vysvětlit, prosím? :-) Díky

---

Telefon - iPhone 4S

Už jsem se do toho zasvětil, u retina displejů je třeba kvalitnější (větší) obrázek a ten pak zmenšovat. Tzn., že třeba u iPhonu s retina displejem je třeba obrázek dvakrát zvětšit a pak ho zobrazit v poloviční velikosti.

Zaměřit se to dá v CSS pomocí min-device-pixel-ratio nebo v JavaScriptu window.devicePixelRatio.