Optimiser mon site pour Iphone
Résolu
Profil bloqué
-
Profil bloqué -
Profil bloqué -
A voir également:
- Optimiser mon site pour Iphone
- Optimiser son pc - Accueil - Utilitaires
- Iphone 16 - Accueil - Téléphones
- Site comme coco - Accueil - Réseaux sociaux
- Site de telechargement - Accueil - Outils
- Site pour vendre des objets d'occasion - Guide
4 réponses
Salut !
Tu peux déjà ajouter une feuille de style CSS spécialle pour les petits écrans avec :
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 :
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.
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.
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.
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.
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 :
et dans le fichier CSS Mobile :
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 :
Ensuite, tu adaptes tout le reste, comme on fait un thème en temps normal.
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.