Toak
Medlem
Siden jeg fikk meg iPhone 4 har jeg begynt å eksperimentere med mobiltilpassede nettsider, da i all hovedsak touch-telefoner. Jeg tenkte da først og fremst å dele en liten erfaring jeg hadde med å lage nettside tilpasset iPhone 4.
Som dere vet har iPhone 4 fått 4 ganger så høy oppløsning som sin forgjenger. iPhone 3GS: 320 x 480, iPhone 4: 960 x 640. Jeg begynte selvsagt å lure på hvordan jeg skulle få nettsiden til å se helt lik ut på en iPhone 4 og en 3GS, med denne store oppløsningsforskjellen. Løsningen ble overraskende.
Safari Mobile oppgir nemlig oppløsningen på telefonen til å være 320 x 480 piksler, og sidene blir tolket deretter. Om du da lager en nettside med grafikk tilpasset 320 x 480 piksler, blir dette pikslete, fordi skjermen egentlig har flere piksler. Og man vil jo selvsagt ikke at grafikken skal se pikslete ut på en iPhone 4, der alt annet et sylskarpt. Teksten er ikke noe problem, dette blir uansett klart.
Jeg er gjerne litt dårlig å forklare, men dere skjønner det gjerne lettere ved å se på dette skjermbildet jeg tok: http://feedcorm.com/iphone_test.jpg Ser dere hvor pikslete bildet blir?
Løsningen ble da å lage bildene og grafikken tilpasset 960 x 640 oppløsning, for dermed å skalere det ned til å passe 320 x 480 piksler, som er det nettsiden tror skjermoppløsningen egentlig er.
For å ta et eksempel: Jeg har et bilde på 100 x 100 piksler som jeg vil ha på min iPhone 4-tilpasset nettside. Legger jeg det rett ut, vil bildet bli strukket opp til 200 x 200 piksler. For å få det skarpt, må jeg lage det i 200 x 200 piksler, for dermed å skalere det med i img-tagget: height="100" width="100". Først da vises det klart på iPhonen, fordi det blir blåst opp igjen til 200 x 200 piksler.
Dette ble gjerne veldig rotete forklart, men håper dere forstod opplegget. Kom også gjerne med forslag på andre måter dette problemet kan løses på! I tillegg til å være en opplysningstråd til dere andre som vil lage en mobiltilpasset nettside som ser skarp ut i iPhone 4, har jeg også et spørsmål:
Bilder er jo enkle å skalere ned, men hvordan skalerer jeg ned en bakgrunn i css/html, slik at disse også blir skarpe?
Som dere vet har iPhone 4 fått 4 ganger så høy oppløsning som sin forgjenger. iPhone 3GS: 320 x 480, iPhone 4: 960 x 640. Jeg begynte selvsagt å lure på hvordan jeg skulle få nettsiden til å se helt lik ut på en iPhone 4 og en 3GS, med denne store oppløsningsforskjellen. Løsningen ble overraskende.
Safari Mobile oppgir nemlig oppløsningen på telefonen til å være 320 x 480 piksler, og sidene blir tolket deretter. Om du da lager en nettside med grafikk tilpasset 320 x 480 piksler, blir dette pikslete, fordi skjermen egentlig har flere piksler. Og man vil jo selvsagt ikke at grafikken skal se pikslete ut på en iPhone 4, der alt annet et sylskarpt. Teksten er ikke noe problem, dette blir uansett klart.
Jeg er gjerne litt dårlig å forklare, men dere skjønner det gjerne lettere ved å se på dette skjermbildet jeg tok: http://feedcorm.com/iphone_test.jpg Ser dere hvor pikslete bildet blir?
Løsningen ble da å lage bildene og grafikken tilpasset 960 x 640 oppløsning, for dermed å skalere det ned til å passe 320 x 480 piksler, som er det nettsiden tror skjermoppløsningen egentlig er.
For å ta et eksempel: Jeg har et bilde på 100 x 100 piksler som jeg vil ha på min iPhone 4-tilpasset nettside. Legger jeg det rett ut, vil bildet bli strukket opp til 200 x 200 piksler. For å få det skarpt, må jeg lage det i 200 x 200 piksler, for dermed å skalere det med i img-tagget: height="100" width="100". Først da vises det klart på iPhonen, fordi det blir blåst opp igjen til 200 x 200 piksler.
Dette ble gjerne veldig rotete forklart, men håper dere forstod opplegget. Kom også gjerne med forslag på andre måter dette problemet kan løses på! I tillegg til å være en opplysningstråd til dere andre som vil lage en mobiltilpasset nettside som ser skarp ut i iPhone 4, har jeg også et spørsmål:
Bilder er jo enkle å skalere ned, men hvordan skalerer jeg ned en bakgrunn i css/html, slik at disse også blir skarpe?
