Optimiser mon site pour Iphone

[Résolu/Fermé]
Signaler
-
 Profil bloqué -
Salut, beaucoup de mes visiteurs ce rendent sur mon site par le biai d'un iphone.
Apres une analyse des statistiques.

C'est pourquoi j'aimerais rendre mon site le plus optimal possible, pour s'afficher sur les Iphones.

Comment peut-on s'y prendre svp?

Makaveli90.

4 réponses

Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
1 039
Salut !

Tu peux déjà ajouter une feuille de style CSS spécialle pour les petits écrans avec :

<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld, only screen and (max-device-width: 480px)"/>


Ce CSS viendra s'ajouter au CSS normale dans le cas d'un écran plus petit que 480pixel de large.
Pour éviter un mélange, tu peux mettre l'autre feuille ainsi :
<link rel="stylesheet" type="text/css" href="STYLE_NORMAL.css" media="all, only screen and (min-device-width: 480px)"/>


Dans le CSS pour le style mobile : il s'agit d'optimiser le desing de ton site pour qu'il soit lisible pour des petits écrans.
Voilà mes conseils :

- une police d'écriture plus grande
- pas la peine de mettre les barres latérales de navigation (ajouter plutôt une page externe du style "plan du site").
- ne pas mettre des effets de :hover, c'est impossible sous iPhone/Androïd
- PERMETTRE DE DÉSACTIVER LES THÈMES POUR MOBILE

Ce sont là mes conseils.
Y'a pas tout mais le gros y est.
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42674 internautes nous ont dit merci ce mois-ci

Sup!

Tous d'abord, si je comprend bien, je doit ajouter ces deux codes:

ajouter celui la!:
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld, only screen and (max-device-width: 480px)"/>

Et modifier mon code initial par celui ci!:
<link rel="stylesheet" type="text/css" href="STYLE_NORMAL.css" media="all, only screen and (min-device-width: 480px)"/>

pour qu'ils dirigent les utilisateurs d'écran plus petits vers le "mobile.CSS"?

Par contre où doit-je placer ces codes svp? entre <head></head> c'est bien ça?


PS: j'ai aperçu sur pas mal de site, que le CSS est pratiquement identique, à l'image de l'ios iphone (frenchiphone.com, iphone4.fr..par exemples!) Il y a surement un logiciel qui traite cette configuration?
Je veut dire que nous sommes peut être pas obliger de reconstruire la forme du site, simplement réadapter le contenu? je dit ça sans certitude... un simple doute!

Makaveli90.
Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
1 039
Tu as bien compris : c'est en effet dans le <head> qu'il faut mettre le code.

Concernant ta question, je ne la comprend pas très bien...
En fait, avec ma solution (un fichier CSS pour mobile) le HTML reste parfaitement identique, ce qui change c'est le desing.

Par exemple, dans le fichier CSS normal tu mets :
body { background: red; }


et dans le fichier CSS Mobile :
body { background: blue; }


Ainsi ton site sera rouge sur un ordinateur, et bleu sur un téléphone (iphone, android...).
En applicant tout la puissance des CSS, tu peux ainsi recréer un style pour l'iPhone qui soit parfaitement visible, même sans utiliser de zoom.

Ce que je conseile de faire (c'est ainsi que je procède moi même d'ailleurs, vu que je suis en train de faire une version mobile pour mon site), c'est de reprendre intégrallement le CSS normal dans le fichier CSS mobile, et de commencer par masque ce qui doit l'être : la barre latérale, le menu... avec :

xxx { display: none; }


Ensuite, tu adaptes tout le reste, comme on fait un thème en temps normal.
Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
1 039
c'est quoi que tu ne comprend pas :
- comment éditer les CSS et faire le thème mobile ?
- quel CSS utilser pour qu'il soit lisible par un mobile ?
Profil bloqué
Oui les deux...
J'ai du mal a editer
Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
1 039
Mais tu sais créer un thème CSS pour une page web ?
b ;) [pardons oui je c'est le faire!]
Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
1 039
Dans ce cas il faudrait commencer par apprendre le langage HTML et CSS : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3

Regarde mon site peut etre? Je suis en php et css!