kartingfreak
Gebruiker
- Lid geworden
- 20 mrt 2006
- Berichten
- 45
Hallo,
Ik ben een website aan het maken dat 'iPhone & iPad friendly' is.
Dit wil zeggen dat ik een website maak dat zowel op pc/mac als op iphone en ipad er goed uit ziet. Bij websites dat mobile devices niet of nog niet ondersteunen moet je op een mobile toestel de website uitvergroten en telkens heen en weer sliden om de website deftig te kunnen lezen.
Alleen ik zit met een probleem bij de keuze van mijn stylesheets!
Ik heb al gevonden dat je voor elke verschillende mobile device een verschillende stylesheet moet hebben. Aangezien iPhone en iPad verschillende resoluties hebben.
iPhone -> iPhone 3GS: 480x320
iPhone 4: 960x640
iPad: 1024x768
Dus in totaal heb ik 4 verschillende stylesheets.
Als ik de website op mijn pc/mac bekijk, dan gebruikt hij wel de goede stylesheet, maar als ik deze dan bekijk op een iPod 1e generatie (heeft dezelfde resolutie als een iPhone) dan gebruikt hij telkens de laatste import van stylesheet dat ik declareer in mijn HTML pagina.
Hierboven is mijn complete head-tag van mijn HTML pagina.
Dus elke keer als ik mijn website uit test op een mobile device gebruikt hij mijn laatst gedeclareerde stylesheet (in mijn geval de 'style-iphone.css')
Weet iemand hoe ik mijn probleem kan oplossen door misschien gebruik te maken van een scriptje dat nagaat welke device de gebruiker heeft en op basis daarvan mijn stylesheet gebruikt?
Mvg
Kevin
Ik ben een website aan het maken dat 'iPhone & iPad friendly' is.
Dit wil zeggen dat ik een website maak dat zowel op pc/mac als op iphone en ipad er goed uit ziet. Bij websites dat mobile devices niet of nog niet ondersteunen moet je op een mobile toestel de website uitvergroten en telkens heen en weer sliden om de website deftig te kunnen lezen.
Alleen ik zit met een probleem bij de keuze van mijn stylesheets!
Ik heb al gevonden dat je voor elke verschillende mobile device een verschillende stylesheet moet hebben. Aangezien iPhone en iPad verschillende resoluties hebben.
iPhone -> iPhone 3GS: 480x320
iPhone 4: 960x640
iPad: 1024x768
Dus in totaal heb ik 4 verschillende stylesheets.
Als ik de website op mijn pc/mac bekijk, dan gebruikt hij wel de goede stylesheet, maar als ik deze dan bekijk op een iPod 1e generatie (heeft dezelfde resolutie als een iPhone) dan gebruikt hij telkens de laatste import van stylesheet dat ik declareer in mijn HTML pagina.
HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iPhone/iPad website</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--start import for iPhone 4 and iPod 4e generation stylesheet-->
<link media="only screen and (max-device-width: 640px)" href="css/style-iphone4.css" type= "text/css" rel="stylesheet" />
<!--end import iPhone 4 and iPod 4e generation stylesheet-->
<!--start import iPad stylesheet-->
<link media="only screen and (max-device-width: 768px)" href="css/style-ipad.css" type="text/css" rel="stylesheet"/>
<!--end import iPad stylesheet-->
<!--start import for iPhone, iPhone 3G, iPhone3GS and iPod 1e - 3e generation stylesheet-->
<link media="only screen and (max-device-width: 320px)" href="css/style-iphone.css" type= "text/css" rel="stylesheet" />
<!--end import iPhone, iPhone 3G, iPhone3GS and iPod 1e - 3e generation stylesheet-->
</head>Hierboven is mijn complete head-tag van mijn HTML pagina.
Dus elke keer als ik mijn website uit test op een mobile device gebruikt hij mijn laatst gedeclareerde stylesheet (in mijn geval de 'style-iphone.css')
Weet iemand hoe ik mijn probleem kan oplossen door misschien gebruik te maken van een scriptje dat nagaat welke device de gebruiker heeft en op basis daarvan mijn stylesheet gebruikt?
Mvg
Kevin
