Sitter och filar lite på en iPhone/Smartphone-optimering av en Webbapp som jag och Micke håller på med för närvarande. I samband med det hittade jag en riktigt trevlig CSS Media Query som rekommenderas varmt:
@media only screen and (max-width: 480px) and (orientation: landscape) {
}
All CSS som definieras innanför denna query kommer gälla enbart för smartphones med en upplösning på max 480 pixlar i bredd (och iPhone 4 som själv anpassar sig) och enbart i landscape-läget. Mycket smidigt för att anpassa utseendet på en sida eller applikation för att bättre passa den bredare skärmen. Jag har testat det på iPhone 4 och iPhone 3G och det funkar perfekt på båda. Ska försöka testa detta med en eller flera Android-telefoner så fort som möjligt för att se om en lösning kan räcka för att täcka båda systemen.
Det här med anpassning av webbsidor och webbapps för att fungera lika bra fast på olika sätt med alla de olika enheter som används idag (från smartphones via tablets till stationära datorer med fullHD-skärmar) är väldigt spännande. Jag kommer återkomma till detta vid tillfälle och då även förklara @media queries så att den något mindre nördiga men ändå intresserade läsaren förstår.