15 svar · 2 550 visningar · startad av Matsakii
Hej,
Har just fått en hemsida byggd. Den bygger mycket på CSS3 och är även optmerad för IE7 nu. Men nu såg jag att den ser inge bra ut i iPad, och katastrof i iPhone. Hur svårt ska det vara? Är det mycket meck för att få sidan att lira med iPad/iPhone?
Hittar inga bra info-sidor om CSS för iPhone/iPad.
iPhone och iPad har Safari webbläsare, så funkar sajten i Safari så ska den fungera på iPad/iPhone med. Med undantaget flash, java etc.
Nej så är inte fallet. Sajten funkar nu i alla browsers på Mac och Windows (IE7 CSS hack). Sajten är gjord på en Mac så det var lite strul att få några saker att lira i Windows.
Men nu som sagt ser det inge bra ut i iPad/iPhone, Safari läsarna :( Så lite CSS hack verkar krävas för dessa.
Har du någon url till sajten?
Borttaget
kan du ladda upp en skärmdump från iphone/ipad?
Har tyvärr inte telefonen här och har ingen egen iPad. Men så här ser det ut på iPhone ungefär http://iphonetester.com/
Jag tror att problemet är inte hos iPad/iPhone. Det finns ingen fast bredd satt på div#main_container vilket gör att innehållet inte får plats när webbläsar fönstret är för litet.
#main_container{
padding:0px;
/* Här är problemet : */
width:100%;
/* Ändra till fast bredd: */
width:1010px;
min-height:100%;
}
rad 19 i stylesheet.css
Hmm det verkade inte funka enligt http://iphonetester.com/ iaf.
Var tvungen att springa och hämta min gamla 2G med IOS 3.1.3 fast det ska ju vara samma version på Safari. Så här ser det ut på min. Och på http://iphonetester.com/ ser det också knasigt ut. Himla skumt :q
Skärmdumpen är från min iPhone 3Gs. Jag förstår att det strular eftersom koden är riktigt stökig med nästlade tabeller madness och flera andra problem:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.rokakrokagoka.se%2F
Jo tack jag vet. Det är ett gammalt eCommerce från 2002 som en designer har ändrat designen i och lagt in lite ny kod (försökt städa upp lite). Har lyckats få allt och funka efter en himla massa tragglande med koden. Just utom det där med iPhone och iPad.
Kanske dags att ge upp!
Själv så använder jag mig av:
<meta name="viewport" content="width=320" />
I headern.
Den här lilla koden gör att mobilen zoomar in hemsidan till 320px(en iphone har 320px horizontellt), dock så lär ju hemsida vara anpassad till 320px. Hjälper kanske inte dig just nu men detta är något du bör sikta emot om du tänker lägga ner tid att anpassa din hemsida till iphones.
Du verkar inte ha någon stilmall för handhållna enheter. Att använda en och samma stilmall till alla enheter är nog svårt att få till bra.
Utveckla istället sidan med rätt förutsättningar för iPhone och gör sedan separata stilmallar.
Den här lilla koden gör att mobilen zoomar in hemsidan till 320px(en iphone har 320px horizontellt), dock så lär ju hemsida vara anpassad till 320px. Hjälper kanske inte dig just nu men detta är något du bör sikta emot om du tänker lägga ner tid att anpassa din hemsida till iphones.
iPhone 4 har dock 640px på bredden, men annars tror jag på den här principen.
Alltså bygg hemsidan så att den har en fast bredd som matchar iPhone-skärmen när du utvecklar. Du behöver knappast iphonetester (som inte verkar fungera så bra ändå) utan du ser ju även på datorskärmen om sidan är 640px bred.
När den passar på den här bestämda bredden så gör gör du en stilmall som gäller enbart för iPhone/handhållna enheter.
Mer information här: http://webdesign.about.com/od/wireless/a/aa070307.htm
Skall du designa om sidan för mobiler, är det http://html5boilerplate.com/mobile som gäller i dagsläget ;)
