Fichier CSS pour tous mobiles
Résolu/Fermé
coucoucestnous75
Messages postés
54
Date d'inscription
samedi 17 octobre 2015
Statut
Membre
Dernière intervention
23 octobre 2016
-
3 sept. 2016 à 01:05
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 6 sept. 2016 à 00:44
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 6 sept. 2016 à 00:44
A voir également:
- Fichier CSS pour tous mobiles
- Fichier rar - Guide
- Fichier host - Guide
- Fichier iso - Guide
- Comment réduire la taille d'un fichier - Guide
- Ouvrir fichier .bin - Guide
3 réponses
dugenou
Messages postés
6087
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
30 juillet 2021
1 451
Modifié par dugenou le 3/09/2016 à 07:34
Modifié par dugenou le 3/09/2016 à 07:34
Bonjour,
Il y a plusieurs méthodes possibles, mais il faut impérativement placer cette balise META dans la partie <head> de tes pages :
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 :
je mets ce code en PHP :
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'>";
}
?>
Fibros
Messages postés
30
Date d'inscription
vendredi 2 septembre 2016
Statut
Membre
Dernière intervention
30 septembre 2016
2
3 sept. 2016 à 01:11
3 sept. 2016 à 01:11
Utilisé
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
@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
Fibros
Messages postés
30
Date d'inscription
vendredi 2 septembre 2016
Statut
Membre
Dernière intervention
30 septembre 2016
2
3 sept. 2016 à 01:13
3 sept. 2016 à 01:13
Logiquement ç ta solution
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
6 sept. 2016 à 00:44
6 sept. 2016 à 00:44
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
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"
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"
