Inhalt
- Kleng Affichage
- CSS an Netzhaut Displays
- Gedanken Experiment
- Mooss e puer zousätzlech Mol, schneid e puer méi
Wéi den James T Kirk Charakter am Star Trek, gleewen ech net u keng Siegsszenarien. Dat ass bis ech d'Iddi hunn adaptiv Biller am reaktiounsfäege Webdesign ze servéieren.
Adaptiv Biller sinn net nëmmen iwwer d'Fro iwwer Skaléiere vu Biller, wat scho vum Ethan Marcotte demonstréiert gouf (kuckt unstoppablerobotninja.com/entry/fluid-images). Et geet drëm mat aneren Themen a Variabelen ëmzegoen fir am Kapp ze halen wann Dir déi bescht Benotzererfarung liwwert. Variabelen wéi:
- Écran Resolutioun
- Bandbreet
- Browser Breet Fënster
De Problem mam Versuch dat bescht Bild ze bestëmmen fir de Browser ze schécken ass dës Aarte vu Facteure kënnen onofhängeg vunenee sinn. An dat ass de Problem:
De Wäert vun engem Element ze kennen, wéi Bildschirmaaufléisung, heescht net datt Dir déi ganz Foto vun der Browsererfarung vum Benotzer kritt.
Kleng Affichage
Als éischt huet den iPhone 4 d'Notioun vum Retina Display agefouert. Retina Display ass d'Onméiglechkeet e Computerdisplay vun deem vun engem Stéck Pabeier z'ënnerscheeden wann Dir den Apparat benotzt.
Virum iPhone 4 hätt ee sech domat ewechgelooss fir just d'Browserbreet diktéieren ze loossen, well d'Iddi war datt de méi klengen Écran de Visiteur vum Site huet, wat Är Internetverbindung och méi lues ass. Wéi och ëmmer, dat ass net de Fall well Affichage gi super beim Verdichte vu ville Bilddaten an engem klengen Ecran.
CSS an Netzhaut Displays
Fir z'entdecken ob e Site Visiteur e Retina Display benotzt, benotzt de Verkeefer-Präfix Eegeschafte webkit-min-device-pixel-ratio mat engem Wäert op 2 a Medienufroen. Wann Dir e separate Stylblat wëllt dat nëmmen CSS Regele enthält fir Netzhautbiller ze liwweren, da géif den CSS Code esou ausgesinn:
Link rel = "stylesheet" Typ = "text / css" href = "/ css / retina.css" media = "nëmmen Écran an (-webkit-min-device-pixel-ratio: 2), nëmmen Écran an (-moz -min-device-pixel-ratio: 2), nëmmen Écran an (-o-min-device-pixel-ratio: 2), nëmmen Écran an (min-device-pixel-ratio: 2) "/>
Wann Dir CSS Regele bannent engem Stilblat schreiwe wëllt, kënnt Dir de Retina Display Detektiounscode mat der @media Regel schreiwen:
@media Bildschierm an (-webkit-min-Apparat-Pixel-Verhältnis: 2), Écran an (-moz-min-Apparat-Pixel-Verhältnis: 2), Écran an (-o-min-Apparat-Pixel-Verhältnis: 2), creen an (min-device-pixel-ratio: 2) {.image-class {background: url ([email protected]); Hannergrondgréisst: 100%; }}
Wärend op enger Breetbandverbindung mat engem schnelle Computer, kënnt Dir den Drag net bemierken, awer d'Benotzer déi am Handysréseau surfen.
Gedanken Experiment
Et gi verschidde Erausfuerderunge fir de passende Bild an engem adaptiven Webumfeld ze liwweren. Fir ze hëllefen eis Käpp op d'Thema ze fokusséieren, loosst eis dëse Problem anescht denken mat dem folgendem Gedankenexperiment:
Loosst eis soen datt e Visiteur op Är Säit mam iPad 3 kënnt (offiziell vun Apple als "den neien iPad" gefördert wéi et erauskomm ass). Dëst ass déi éischt Tablet déi mat Netzhaut Display erauskomm ass, déi am meeschte Desktop Displays an High-Definition Fernsehapparater konkurréiere an och iwwergoen. (Kuckt och 15 Top Tipps fir den neien iPad 3 z'entwéckelen). Zousätzlech huet den iPad 3 d'Méiglechkeet mam Internet duerch mobil a kabellos Verbindung ze verbannen.
Zënter dem Bildschierm vum iPad ass déiselwecht Dimensioun wéi den iPad 2, de Browser "Breet" wäert déiselwecht sinn. Mat deem als Setup, hei sinn d'Froen:
- Realiséiere datt d'Browserbreet net hëllefräich ass fir dat bescht Bild ze bestëmmen a wann e Site Visiteur am Internet surft um iPad 3 mat 3G, wéi ee Bild liwwert Dir op Ärem Site?
- Liwwert Dir déi niddereg Opléisung, mobil frëndlech Versioun?
- Oder léisst Dir den iPad 3 déi méi grouss Versioun hunn, awer mat der längerer Downloadzäit?
Mooss e puer zousätzlech Mol, schneid e puer méi
Déi ultimativ Léisung fir reaktiounsfäeg Webdesignbiller ze liwweren ass e Bild eroflueden eemol ze hunn an dat Bild wier ëmmer dat passend Bild fir all Apparat a Browser an deem et sech fënnt. Allerdéngs ass dat de Moment net méiglech.
Déi bescht Approche bei de meeschten aktuellen Léisungen ass mobil frëndlech Biller ze setzen als de Wäert fir SRC Attributer fir Bildelementer. Et stellt sech eraus datt et vill Patches oder Polyfills zu dësem Problem sinn. Eigentlech sinn et der 22 beim leschte Grof.
Zesummen mam Chris Coyier an aneren, hu mir eng Tabelle gemaach (kuckt telejec.tv/JdvEkt) déi d'Virdeeler an d'Charakteristike vun all Léisung markéiert.
All Léisung ass anescht, bitt hir eege Sätz vu Vir- an Nodeeler. E puer erfuerderen Backend Support, anerer sinn nëmme Clientssäit Léisungen. Kuckt d'Lëscht vun de Léisungen an fannt déi richteg Léisung fir Är Besoinen.
Verpasst net dem Christopher Schmitt seng Tipps an Tricks fir Retina Biller am reaktiounsfäege Webdesign.
Kappballbild vun der Madame Logic.
