Webapp sur iPod touch et iPhone

Bonjour ,

Tout d abord je tiens à vous feliciter pour la qualité de vos articles et la pertinences de vos reponses sur les forums. Je dois reconnaitre que je suis un lecteur de l ombre depuis plusieurs années ( en plus d etre de stras ) et j ai souvent trouvé des reponses sur votre forum.

Voila mon probleme, je developpe actuellement une webapp pour iphone, ipod, android et certain BB . Mon site s affiche plutot bien sur les différentes plateforme... cependant lorsque je le test sur un iPhone touch v 3.1.3 , je vois qu il ne charge pas mon css.

Suivant vos conseils, j ai utilisé les media queries afin de detecter le mode portrait ou landscape par exemple, et je suppose que la version de safari sur l os 3.1.3 ne les comprend pas. Voici mon code :

dans mon template :

	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.2, user-scalable=true;">
<script type="text/javascript" src="javascript/css3-mediaqueries.js"></script>
	<!--[if lte IE 8]>
    	<link rel="stylesheet" media="screen" href="theme/portrait.css"> 
    /*
    <![endif]-->
    <!--[if !(lte IE 8)]><!-->

	<link rel="stylesheet" media="all and (orientation:portrait)" href="theme/portrait.css"> 
	<link rel="stylesheet" media="all and (orientation:landscape)" href="theme/paysage.css">
    <![endif]-->
   
	<link rel="stylesheet" media="all and (orientation:portrait)" href="theme/portrait.css"> 
	<link rel="stylesheet" media="all and (orientation:landscape)" href="theme/paysage.css">	

et voici un exemple du contenu de mon css : portrait.

@media (max-width: 320px) { 
 
 body, element1, element2 { width: auto !important; height: auto !important; margin: auto !important; padding: auto !important;} 
 
 img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {max-width: 100% !important;}
 
 textarea, table, td, th, code, pre, samp { word-wrap: break-word; /* césure forcée */ white-space: pre-line; /* passage à la ligne spécifique pour les éléments à châsse fixe */ } 
 
 /*element1, element2 { 
   float: none !important;
   width: auto !important 
 } */
 
} 
/*---------------Debut CSS orientation portrait------------------------*/

	
  	body {margin:0;padding:0;background-image:url(../images/bg_general.jpg);background-repeat:repeat;}
	/*#page {width:320px;}*/


/*-------------------------------------------------------------------*/
/*------------header page principale----------------------------------*/

	#header {background-image:url(../images/bg_header.jpg);background-repeat:repeat-x;width:100%;height:100%;text-align:center;}
	#header_left {background-image:url(../images/bg_header_left.jpg);width:58px;height:88px;float:left;}
	#header_right {background-image:url(../images/bg_header_right.jpg);width:58px;height:88px;float:right;}
	.header_title {background-image:url(../images/logo.jpg);height:100%;width:100%;display:inline;}

questions :

1 ) le design de mon site propose un largeur de 320px. Est ce que j ai bien declaré les viewport et différent media queries ???

2) est ce que safari 3 comprend " media="all and (orientation:portrait)"" ? j ai fouillé sur internet et j ai pas trouvé la reponse. ( j ai testé le site sur un iPod touch recent et mon site fonctionne bien, je suppose que la derniere version de safari comprend bien ca )

merci d avance pour vos réponses

fab

Ta meta viewport n'est pas correcte et il y a pleins de petites choses à corriger, plutôt qu'un long discours je t'invites à aller voir Mobile Boilerplate (gabarit html5 optimisé pour mobiles), c'est bourré d'infos et d'astuces.

Edit : sur mon site j'ai tout regroupé dans une seule feuille de style. Les autres css viennent des plugins.
Modifié par Patidou (04 May 2011 - 11:44)

Merci Patidou , je vais essayer de lire tout ca ...

si avant ca tu vois des erreurs monumentales à corriger, hesites pas à m en faire part , je suis tout ouïe