Hur nya iPad:en ställer till det på webben
2012-03-26 - ipad, ipad 3, webben, css
0
Detta började egentligen med iPhone 4 och Retina Display där, men är mer tydlig med nya iPad (som då inte heter iPad 3). Med så mycket pixlar som skärmen har så blir text helt plötsligt högupplöst, vilket ju är helt fantastiskt förstås. Men vad betyder det här för bilder då?
iPad (varken nya eller gamla) visar inte en hemsida på samma sätt som en webbläsare på datorn, utan anpassar den till skärmen. Det betyder att viss text kan förstoras, layouten kan krympas för att rymmas och liknande. Och på nya iPad:en så ser ju texten fantastisk ut, men var händer med bilderna? Förra iPad:en hade en skärm på 1024x768 pixlar och en ikon på 32x32 pixlar på den skärmen såg "normal" ut mycket eftersom texten hade samma upplösning som bilden. På nya iPad:en så kommer texten har avsevärt högre upplösning än en ikon på 32x32 pixlar som alltså visas på samma fysiska yta på skärmen som innan, men skärmen har möjlighet att visa mycket fler pixlar på den ytan än vad som finns i ikonen.
Som ni ser ovan så är antalet pixlar fördubblade men i mittenbilden så visas ju samma 32x32 pixels ikon trots det. Hur fixar man det då? Ja, tyvärr så finns det ingen bra lösning som inte har några nackdelar. Apple själva löser det med ett javascript som ersätter de lågupplösta bilderna med högupplösta, dock så betyder det att iPad:en måste först ladda de lågupplösta, sedan de högupplösta, vilket gör att webbsidor blir fyra gånger större för iPad, som ska vara en mobil enhet och helt klart har begränsade resurser jämfört med "riktiga" datorer (ja, förutom skärmupplösningen då).
Ett annat sätt är att känna av iPad:en direkt på servern innan bilden skickas, så den får rätt bild på en gång. Då slipper man ladda samma bild flera gånger och sparar bandbredd och minne. Men det betyder att man måste skicka en fyra gånger så stor ikon men ändå ange att den är fyra gånger mindre, som så här:
<img src='api_64.png' height='32' width='32'>
Men det är inte alltid så lätt och jag har inte löst det själv (helt) ännu, men med dessa högupplösta skärmar blir det ett allt mer tydligare behov.
Mer i Webblog
Datorn fungerar igen
SpelPCn fungerar inte
AppleTV vs Mac Mini
Hur nya iPaden stller till det p webben
G ned i vikt
Star Wars The Blueprints har kommit
Vattenkylning
Nyckelord: ipad, ipad 3, webben, css eller php
OAuth fungerar inte
iPad i kket
Spotify fr iPad
Hur nya iPaden stller till det p webben
Nyheter vs Ondigt skit
CSSruta igen nu med skugga
My IPad wish list
Gillestugan uppdaterad!
Spelbord v2
Tre billyhyllor blir två
Gymkort
You can't take the sky from me
Högtalare klara!
eklundh.com tar ned skylten
Högtalare bestämda!
Uppgraderingar biorum
Lord of the Rings-maraton
Ergonomiskt som tusan!
Lego Storm Trooper
Fågel Fenix
Två hyllor på badrummet
Hobbyhörna fixad
Hylla bakom soffan
Modellbygge igen!
Porträtt av u/Flattie-Ratty
Porträtt av u/DangDoood
Buy prints of my maps
Hero Dashboard för Descent
3D-printer
Fältsjukhus 616
Ny kaffemaskin
Porträtt av u/elizabeeeef
Jämförelse 135 mm
Nya objektiv
Porträtt av kompis mamma
Använda utrymmet under trappen
Spelbord
Pimpning av köks-ön
Jag saknar min Dodge!
Acrylic drip
Renoverad ateljé
Nytt hemmakontor
Ny tatuering
Vidamount för iPod Touch
Fågel Fenix

Vilken locksång väcker din uppmärksamhet?
Grace
I’m a lumberjack and I’m ok
Galaxy's Edge
Dodgen upplagd för försäljning
Gamingstol som kontorsstol
Sun and Stars
Barking up the wrong tree
Light at the end of the tunnel
Serveringsbricka
Regntunnor och grus
Pergola
Uppdatering av ikoner
#inlineditbutton