Aller au menu - Aller au contenu

CSS pour iPad, iPhone, android ...

comment ajuster mon site sur iPad

Pour accéder à cette section
Connectez-vous !
connexion_rpx

Résolu Le problème de ce sujet a été résolu

Page 1 
Auteur Message
1 visiteur sur ce sujet (1 Anonyme)
Page 1 
Hors ligne papay # Posté le 17/02/2012 à 09:48:43
Avatar
Bonjour tout le monde !

j'ai essayé mon site web sur un iPad et c'est catastrophique, tout est mélangé !

pouvez vous svp me donner des astuces pour fixer le css de mon site web sir iPad, i Phone, androïde, balckbery ...

Merci d'avance!
Publicité # Posté le 17/02/2012 à 09:48:43

Hors ligne jibey13 # Posté le 17/02/2012 à 10:17:49

Tu pourrais peut-être utiliser les instructions de sélection conditionnelles des feuilles de style, je l'ai fait pour mon site selon la taille des écrans. Ca donne ça.

Code : CSS
1
2
echo '<link rel="stylesheet" href="http://www.jbpratt.com/wp-content/themes/cordobo-green-park-2/stylejbpratt980.css" type="text/css" media="screen and (min-width:1000px)" />';
echo '<link rel="stylesheet" href="http://www.jbpratt.com/wp-content/themes/cordobo-green-park-2/stylejbpratt760.css" type="text/css" media="screen and (max-width:990px)" />';


Mais je ne suis pas certain que ça fonctionne sur tous les supports.
Il y a aussi une ergonomie à modifier, notamment pour les téléphones portables, même si je ne m'y suis pas encore collé.
Hors ligne eddynamique # Posté le 17/02/2012 à 11:20:13
Avatar
Je pense qu'une des meilleurs solutions pour porter son site sur périphérique mobile et de faire une copie de son site dédiée à ce type d'écran avec une URL du type http://mobile.tonsite.com en gérant une redirection automatique en fonction du navigateur utilisé (détection de navigateur mobile).
De ce fait tu pourras optimiser ton site mobile en améliorant son ergonomie sans être obliger de jongler constamment entre les différentes résolutions pour faire tes tests..
Développeur indépendant
www.the-digitalfactory.com

Image utilisateur
 
Hors ligne warpShadow # Posté le 17/02/2012 à 14:07:27
3ème dan de CSS
Avatar
Flux RSS
close

Ville : Pia
Pays : France métropolitaine
Bonjour,

Le plus en vogue, c'est le responsive design, à l'aide des media queries.

Ça permet de ne pas avoir à sélectionner une floppée de navigateurs mobiles au risque d'en oublier, et de ne pas avoir à faire un rendu différent pour chaque taille de smartphone.
Édité le 18/02/2012 à 14:16:33 par warpShadow
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Défenseur des technologies Microsoft !
Je n'accepte pas les demandes d'amis. Pas d'aide par MP, utilisez le forum.

Les meilleur(e)s du forum XHTML/CSS : AkaiKen, mynfs, Myssdii, Rigs, Ronamazona, MajorShepard, Marsupilamie, Nightmat, Loun4st4ck. Écoutez-les !

Je fais aussi un petit peu de guitare.
 
Hors ligne papay # Posté le 18/02/2012 à 10:43:38
Avatar
Bonjour,

Merci pour vos réponses, mais pouvez vous me donnez un exemple réel d'ajustement pour un ipad (par exemple largeur)?

Merci
Hors ligne jibey13 # Posté le 18/02/2012 à 11:28:37

http://www.laissemoichercherca.com/?q= [...] %20en%20pixel
Hors ligne warpShadow # Posté le 18/02/2012 à 14:17:20
3ème dan de CSS
Avatar
Flux RSS
close

Ville : Pia
Pays : France métropolitaine
Tu as plein d'exemples à voir dans la liste de sites responsives que je t'ai donnée plus haut : http://designmodo.com/responsive-design-examples/

jibey13: quand tu veux faire ça, assure-toi au moins d'avoir lu la question...
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Défenseur des technologies Microsoft !
Je n'accepte pas les demandes d'amis. Pas d'aide par MP, utilisez le forum.

Les meilleur(e)s du forum XHTML/CSS : AkaiKen, mynfs, Myssdii, Rigs, Ronamazona, MajorShepard, Marsupilamie, Nightmat, Loun4st4ck. Écoutez-les !

Je fais aussi un petit peu de guitare.
 
Hors ligne jibey13 # Posté le 18/02/2012 à 15:48:23

J'ai lu la question avant, il demandait des exemples d'ajustement et notamment la taille, donc bon, effectivement il souhaitait peut-être plus, mais la base si c'est du 1028, c'est que la largeur se situe en-dessous de 1000, ce qui je pense se trouve par soi-même.
Hors ligne warpShadow # Posté le 18/02/2012 à 15:49:51
3ème dan de CSS
Avatar
Flux RSS
close

Ville : Pia
Pays : France métropolitaine
Il n'a pas demandé la taille d'un ipad, mais des exemples concrets d'ajustement de design à la largeur d'un ipad. Là tu lui proposes de faire une recherche sur la taille de l'écran d'un ipad. ;)
Édité le 18/02/2012 à 15:50:23 par warpShadow
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Défenseur des technologies Microsoft !
Je n'accepte pas les demandes d'amis. Pas d'aide par MP, utilisez le forum.

Les meilleur(e)s du forum XHTML/CSS : AkaiKen, mynfs, Myssdii, Rigs, Ronamazona, MajorShepard, Marsupilamie, Nightmat, Loun4st4ck. Écoutez-les !

Je fais aussi un petit peu de guitare.
 
Hors ligne jibey13 # Posté le 18/02/2012 à 16:35:52

ok, j'avoue avoir mal lu la question.. ;)
Hors ligne JeremGraph # Posté le 18/02/2012 à 17:19:42
I now walk... into the wild!
Avatar
Flux RSS
close

Citation : warpShadow
Bonjour,

Le plus en vogue, c'est le responsive design, à l'aide des media queries.

Ça permet de ne pas avoir à sélectionner une floppée de navigateurs mobiles au risque d'en oublier, et de ne pas avoir à faire un rendu différent pour chaque taille de smartphone.

Je plussoie, j'acquiesce, je suis totalement d'accord avec warpShadow. Les medias queries sont là meilleure solution. Dans ton css général, tu peux ajouter une requête pour appeler un design spécifique pour une résolution spécifique.

Exemple :
Code : CSS
1
@media screen and (max-width: 800px) { }

Ce code permettra de rajouter, supprimer des éléments css, pour des écrans dont la résolution est inférieure ou égal à 800px.

Donc après, il te reste à modifier pour les résolutions d'iPad, tout dépend comment tu souhaites interpréter ton design dans le cas d'un utilisation sur tablette.

Ps : Faut pas oublier de déclarer ça dans le html : Code : HTML
1
<meta name="viewport" content="initial-scale=1.0, width=device-width">
Édité le 18/02/2012 à 17:20:24 par JeremGraph
JeremDsgn › Web & UI Designer

Image utilisateur
 
Hors ligne papay # Posté le 22/02/2012 à 17:16:06
Avatar
Bonjour tout le monde,

j'ai essayé avec ce code, mais le problème que l'iPad peut avoir deux possibilité de dimensions:
- Verticalement: 1024 * 768
- Horizontalement: 768 * 1024
si je met ce code:
@media screen and (max-width: 800px) { ... }

verticalement je vois mes changement, mais horizontalement aucun changement!

est il possible de mettre max-width:1024px?

Quelqu'un a une idée pour ce problème?
Merci d'avance !
Édité le 22/02/2012 à 17:16:43 par papay
Hors ligne warpShadow # Posté le 22/02/2012 à 17:19:10
3ème dan de CSS
Avatar
Flux RSS
close

Ville : Pia
Pays : France métropolitaine
Oui, tu peux mettre la valeur que tu veux ; mais si la tablette peut faire passer la largeur du site normal, autant afficher le site normal non ?
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Défenseur des technologies Microsoft !
Je n'accepte pas les demandes d'amis. Pas d'aide par MP, utilisez le forum.

Les meilleur(e)s du forum XHTML/CSS : AkaiKen, mynfs, Myssdii, Rigs, Ronamazona, MajorShepard, Marsupilamie, Nightmat, Loun4st4ck. Écoutez-les !

Je fais aussi un petit peu de guitare.
 
Hors ligne JeremGraph # Posté le 22/02/2012 à 19:05:35
I now walk... into the wild!
Avatar
Flux RSS
close

Tu utilises les deux conditions à rajpouter à tes medias queries : Code : CSS
1
@media screen and (max-width: 600px) and (orientation: landscape) { }
ou Code : CSS
1
@media screen and (max-width: 600px) and (orientation: portrait) { }
JeremDsgn › Web & UI Designer

Image utilisateur
 
Hors ligne papay # Posté le 23/02/2012 à 08:56:30
Avatar
@ warpShadow: le contenu de ma page (texte, positionnement...) est ok sur la tablette, par contre, j'utilise un code css pour que mon background image soit étirable sur toute la surface, maintenant j'ai testé avec max-width:1024px et c'est ok, mais ma question est t-il possible qu'il y'a des gens que trvaillent encore sur des écrans de pc de 1024px de largeur, donc mon css sera changé sur ces genres d'écrans?

@JeremGraph: je ne comprend pas la différence entre le deux mode: portrait et landscape, peut tu m'expliquer stp?

Grand merci!
Hors ligne warpShadow # Posté le 23/02/2012 à 14:39:58
3ème dan de CSS
Avatar
Flux RSS
close

Ville : Pia
Pays : France métropolitaine
C'est possible qu'il y en ait ; mais c'est une minorité. Et puis c'est comme pour les vieux navigateur, si on pousse pas les derniers résistant au derche, ils n'avancent jamais. ;)

Portrait et landscape, c'est l'orientation de ton iPad ; donc en gardant max-width à 600, tu résouds le problème, car le CSS comprendra que même affiché en paysage, il doit s'afficher avec les paramètres de tes media queries.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Défenseur des technologies Microsoft !
Je n'accepte pas les demandes d'amis. Pas d'aide par MP, utilisez le forum.

Les meilleur(e)s du forum XHTML/CSS : AkaiKen, mynfs, Myssdii, Rigs, Ronamazona, MajorShepard, Marsupilamie, Nightmat, Loun4st4ck. Écoutez-les !

Je fais aussi un petit peu de guitare.
 
Hors ligne papay # Posté le 27/02/2012 à 15:40:08
Avatar
veux tu dire que mode portrait = iPad utilisé horizontalement et mode landscape = iPad utilisé verticalement ?
Hors ligne warpShadow # Posté le 27/02/2012 à 15:59:19
3ème dan de CSS
Avatar
Flux RSS
close

Ville : Pia
Pays : France métropolitaine
Oui, exactement
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Défenseur des technologies Microsoft !
Je n'accepte pas les demandes d'amis. Pas d'aide par MP, utilisez le forum.

Les meilleur(e)s du forum XHTML/CSS : AkaiKen, mynfs, Myssdii, Rigs, Ronamazona, MajorShepard, Marsupilamie, Nightmat, Loun4st4ck. Écoutez-les !

Je fais aussi un petit peu de guitare.
 
Hors ligne papay # Posté le 28/02/2012 à 08:21:49
Avatar
Merci warpShadow pour l'aide, c'est bien résolu pour l'ipad!

Je veux tester maintenant mon site sur un iPhone que je ne le possede pas, est - il possible de trouver un simulateur que donne le même rendu qu'un iPhone?

Merci
Édité le 28/02/2012 à 08:24:39 par papay

Retour au forum "HTML / CSS" ou à la liste des forums

Pour accéder à cette section
Connectez-vous !
connexion_rpx


Lire aussi