Archief - Media queries voor iPhone 4 en Iphone 5?

Ik gebruik volgende media queries:



Nu zie ik dat de iPhone 5 een groter formaat heeft. Ik denk dat de iPhone 6 plus zelfs nòg een groter formaat heeft. Gebruiken jullie hiervoor dan 2 extra media queries? En vooral, moet je dan om goed te zijn 3 iPhones ter beschikking hebben? Dat lijkt me toch iets te veel van het goede te zijn neen?



ps: bij mijn iPad klopt de breedte niet in portrait, ik moet dit altijd instellen op 980px (ipv 1024px), als ik de breedte van mijn container instel op 1024px heb ik een horizontale balk op iPad portrait?

Kies je breakpoints in functie van je content en niet in functie van devices, anders mag je nog met tientallen afwijkende android resoluties rekening beginnen houden.
Je specifieert dus je breakpoints beter volgens wanneer je merkt dat voor een bepaalde breedte (in heel soms eens in functie van orientatie, wat neerkomt op of iets hoger of minder hoog is dan de breedte) je inhoud van je site/app niet meer proper en leesbaar is.

Als je vanuit je content vertrekt, dan zal het er op elk device, nu EN in de toekomst, altijd goed uit zien.

Zoals je breakpoints er nu staan zal een iPhone 6 dus de "iPad" versie gebruiken. Je kan eventueel overstappen naar de iPhone breakpoints door de max-width aan te passen. Maar ik zeg het opnieuw: kijk vanaf welke breedte je layout een breakpoint nodig heeft om je content er mooi te laten uitzien, niet welke resolutie device X of Y heeft.

Aanvullend: zelfde verhaal met je fixed width instellingen. Fixed width gebruik je als je wil dat een container effectief altijd die fixed width heeft en niet omdat een device waarschijnlijk die breedte heeft (daar kan je niet van uit gaan). Wil je de volledige breedte benutten, dan gebruik je procentuele waarden voor je container.

Bealzebub heeft gelijk. Probeer telkens met procenten te werken ipv vaste waarden. Je kan dit makkelijk gaan berekenen en uw px vervangen. Dan gewoon uw window gaan resizen tot bepaalde zaken niet correct meer weergegeven worden, dan ga je een breakpoint gaan instellen.

Je moet ook wel rekening houden met de pixel density van je device hoor. Je wilt niet dat een desktopversie op een 5" apparaat wordt weergegeven.

Komt in orde, thanks!