Fichier CSS pour tous mobiles

Résolu
coucoucestnous75 Messages postés 54 Date d'inscription   Statut Membre Dernière intervention   -  
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

J'ai un fichier CSS pour la version desktop de mon site internet que j'ai bien intégré sur le site mais j'aimerais pouvoir "desactiver" ce fichier et utiliser un autre pour les mobiles.
Je me suis déjà documenter, notamment sur openclassroom et les solutions énoncées (avec screen-size et autres) n'a pas fonctionné avec moi.
Ya t il une autre solution soit avec du CSS soit avec du Javascript?

Merci d'avance pour la réponse.
A voir également:

3 réponses

Réponse 1 / 3
dugenou Messages postés 6087 Date d'inscription   Statut Contributeur Dernière intervention   1 452
 
Bonjour,

Il y a plusieurs méthodes possibles, mais il faut impérativement placer cette balise META dans la partie <head> de tes pages : 

<meta name="viewport" content="width=device-width, initial-scale=1.0">


Personnellement j'ai créé deux feuilles de styles, une pour les ordinateurs (style.css) et une pour les mobiles et tablettes (style-mob.css).

Dans la feuille de styles pour ordinateur, j'ai quand même ajouté une partie @media pour les écrans de petites dimensions, comme les Netbook.

Ensuite, pour appliquer une feuille de styles en fonction du média, dans la partie <head> à la place de : 

<link rel="stylesheet" href="style.css" type="text/css"/>

je mets ce code en PHP : 

<?php	
// Chargement du fichier CSS s'il s'agit d'un user agent smartphones
$ua = $_SERVER['HTTP_USER_AGENT'];
if (preg_match('/iphone/i',$ua) || preg_match('/android/i',$ua) || preg_match('/blackberry/i',$ua) || preg_match('/symb/i',$ua) || preg_match('/ipad/i',$ua) || preg_match('/ipod/i',$ua) || preg_match('/phone/i',$ua) )
{
echo "<link rel='stylesheet' type='text/css' href='style-mob.css'>";
}
else 
{
echo "<link rel='stylesheet' type='text/css' href='style.css'>";
}
?>
1
Réponse 2 / 3
Fibros Messages postés 30 Date d'inscription   Statut Membre Dernière intervention   2
 
Utilisé 

@media (...)

Fait les tuto sa pourrait te plaire
Ç pour adapter pour chaque écran simultanément comme sa pour chaque périphérique vidéo tu pourras le configurer en une feuille de style.css
0
Fibros Messages postés 30 Date d'inscription   Statut Membre Dernière intervention   2
 
Logiquement ç ta solution
0
Réponse 3 / 3
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Salut

Je trouve que la solution de dugenou bien qu'étant correcte en soi, est un peu bloquante, car s'appuyant sur une detection de user agent (qui pourront changer avec le temps) plutot que de résolution de fenetre d'affichage (un ipad peux changer d'orientation et un design "mobile" ne sera pas du plus bel effet dans ce cas).


je te conseille de ne faire qu'une seule feuille de style avec des width en % (et des max-width en px si besoin)
(s'adapte a toutes les résolutions et à tous les devices)
puis uniquement pour telle ou telle limite de résolution et uniquement pour ce qui va changer suivant la résolution mettre des media screen dans le css de base.
(C'est la solution que j'ai adopté)


exemple 
...code css....
@media screen and (max-width : 800px) {
le css qui change pour resolution inferieure à 800px
}

@media screen and (max-width : 800px) and (min-width : 480px) {
le css qui change pour resolution comprise entre 800px et 480 px
}
@media screen  and (max-width : 479px) {
le css qui change pour resolution inferieure à 480 px
}
etc ....


Cette solution
1) ne se préocupe pas du device mais de la resolution de fenetre d'affichage
2) inutile de changer plusieurs feuilles de style dès que l'on change le design quelque part
3) ne change que ce qu'il faut
4) s'adapte automatiquement lors du recadrage de fenetre sur grands écrans desktop et du changement d'orientation sur tablette et mobile

Evidement comme dugenou le dis mettre le meta name="viewport"
0