Custom CSS voor iPad *

[Nedra]

Hi all, ik ben bezig met een oudere Joomla site iPad compatible te maken (de achtergrond afbeelding is onderdeel van het ontwerp en wordt gescaled door de iPad wat de lay-out verpest). Mijn idee was om dit op te lossen door een apart iPad CSS sheet in te laden en in deze een andere (kleinere) achtergrond mee te laten scalen. Maar nou komt 't, ik heb geen idee hoe dat moet. Ik heb genoeg redirects gevonden om mensen, indien ze via een bepaald device browsen, naar een specifieke website voor dit device gaan. Maar wat ik simpelweg wil, is een manier waarop ik een extra css sheet kan in laden voor een specifiek device/browser, net zoals bijv. met ie7, etc.

Enig idee hoe ik dit makkelijk voor elkaar kan krijgen? Bij voorbaat dank,

[Bosmonster]

@media query's?

Maar iPad is gewoon een bijna volwaardig internetapparaat met 1024 en Safari, dus als je site daar niet goed op werkt lijkt het me ook niet goed te werken op andere computers.

[Nedra]

Niet helemaal. De iPad gaat anders om met het scalen van achtergronden en 'fixed' achtergronden. Bij deze site heb ik een beetje gecheat met de lay-out door de achtergrond van de content wrapper onderdeel te maken van de gehele achtergrond. Niet het meest netjes, maar wel snel. Op de iPad wordt de achtergrond dus automatisch verkleind, waardoor het gedeelte waar de content normaal gesproken over heen zit ook te klein wordt.

Ik heb een Media Query toegevoegd, maar ik krijg daar geen effect mee, misschie ndoe ik iets fout?

PHP:

<link href="<?php echo $template_baseurl; ?>/css/ipad.css" rel="stylesheet"  media="only screen and (max-device-width: 1024px)" type="text/css" />

[MueR]

Heb de titel even gewijzigd, deze dekt de lading wat meer.

[frickY]

Zo te zien heb je de beschikking over PHP, dus kun je ook naar de User-Agent ($_SERVER['HTTP_USER_AGENT']) kijken om te bepalen of je wel of niet met een iPad te maken hebt. Niet het meest netjes, maar wel eenvoudig.

[chem]

Ben geen ppk-fan, maar http://www.quirksmode.org...10/09/rethinking_the.html bevat een interessant aanpak voor mobiele websites.
Wellicht interessant om dat eerst eens door te lezen

[spocky]

Je kunt dat het beste met een @media query doen. Jeffrey Way van NetTuts heeft daar een duidelijke screencast over gemaakt en in de comments wordt ook nog specifiek ingegaan op het targetten van de nieuwe iPhone: http://net.tutsplus.com/t...rse-in-css-media-queries/

[Nedra]

Bedankt voor de tips en handige links! Heb ik in de toekomst ook nog veel aan. Ik had al veel gezocht over dit soort dingen maar op en gegeven moment werd het toch zo een bomen-bos verhaal. Aangezien ik alleen een aangepaste achtergrond wou oproepen heb ik een media query in de CSS gebruikt.