Forcer la redirection vers un CSS Mobile.

[Selthis]

Hello tout le monde.

Je travaille actuellement sur un site vertical (c'est à dire que j'ai un background image très haut de 3000px) afin de jouer sur des effets de profondeur et de mouvement avec le multi background proposé par les nouvelles propriétés de CSS3.

J'obtiens des effets super sympas, le site est valide, pas trop lourd, bref c'est cool (il n'est plus en ligne pour l'instant, je le développe en local).

Mais mon problème du coup, c'est que l'iPad et l'iPhone (Safari Mobile quoi) redimensionne mon image car elle est trop grande, et le contenu continu alors que l'image s'arrête au milieu de la page. J'ai lu sur des forums anglais que Safari Mobile redimensionné automatiquement les images ayant plus de 'x' millions de pixels.

J'envisage donc de travailler sur une version Mobile de mon site, et ma question est donc : comment dans le header de mon index.php, je peux dire au visiteur 'tu es sur un ordinateur, tu reste ici, tu es sur Safari Mobile > tu vas sur la version iPad ? (le tout automatiquement bien sûr.)

Merci

 

[Anonyme]

Pas besoin de redirections (les redirections c'est le mal), suffit d'utiliser les medias queries.

 

[Selthis]

Oh merci beaucoup
Donc avec ce code :

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="paysage.css">

Je peux en plus faire un affichage si l'iPad est en vertical ou horizontal, c'est encore plus pratique que ce que je pensais, thanks

 

[Anonyme]

Tu as intérêt à cibler aussi la largeur d'écran, le mieux c'est placer tout dans le même fichier css. Genre :

//propriétés commnes à tous les médias (css media all)

body {}

//pour iPhone et autres

@media only screen and (max-width: 640px) { 
  .bloc { 
    display:block; 
    clear:both; 
  } 
}

//ipad paysage

@media only screen and (max-width: 1024px) and (orientation: landscape) { 
  .bloc { 
    display:block; 
    clear:both; 
  } 
}

//ipad portrait

@media only screen and (max-width: 768px) and (orientation: portrait) { 
  .bloc { 
    display:block; 
    clear:both; 
  } 
} 

//impression

@media print { 
  #menu, #footer, aside { 
    display:none; 
  } 
  body { 
    font-size:120%; 
    color:black; 
  } 
}

Code html :

<meta name="viewport" content="width=device-width, minimum-scale=1.0" /> 
<link rel="stylesheet" type="text/css" href="style.css" media="all" />

 

[Selthis]

Effectivement c'est moins le bordel en mettant tout dans le même CSS
Merci beaucoup

 

[Anonyme]

Il n'y a surtout qu'une seule requête http

 

[Selthis]

Bonjour.
Encore mois un peu longtemps après

Je veux réutiliser la même technique sur un nouveau site, mais sur celui çi, j'ai un background-image dans la balise body. Quand je rajoute le balise body et un background-color pour la version iphone/ipad, ce nouveau body n'est pas prise en compte, c'est le premier body principale de la page qu'il l'est.

Une idée ou une solution pour contourner ce problème ?

Merci

 

[Selthis]

En fait vu que mon site comprenait pas mal d'Ajax et d'effet Java, j'ai préféré créer une page spéciale pour la version iPad pour aller au delà d'une simple modification CSS.

Par contre est il possible de faire une version pour un navigateur en particulier ? Je m'explique : Sur un système de multiples background (qui donne un très bel effet de prfondeur) le scroll n'est pas fluide sur Firefox et IE, ce qui donne un effet très moyen, j'aimerais donc créer des version du fond aplati.

Assez simple pour les vieux navigateurs qui ne gèrent pas le multiples background, mais assez moche pour les vieux navigateurs qui le gèrent mal.

 

[cherryblue]

il te suffit de mettre une feuille de style conditionelle pour IE, et de définir dedans tes CSS, qui ne seront donc pris en compte que par IE

exemple, pour afficher une feuille de style pour toutes les versions IE inférieures ou égales à IE8 (mais donc pas prise ne compte par IE9)

<!--[if lt IE 9]>
<link href="/css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

pour toutes les versions de IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/ie.css" media="screen,handheld" />
<![endif]-->

Pour IE 6 seulement

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie.css" media="screen,handheld" />
<![endif]-->