Centrer site sur smartphone

25 réponses

romer

27/10/2010 à 11:57

Hi,
Petit soucis peu grave mais agaçant.
Je centre un site de largeur fixe de la manière suvante :

<body>
<div id="wraper">
... etc.
--------------------------------
#wraper{
position:relative;
width:920px;
left:50%;
margin-left:-460px;
}

ou au choix :

#wraper{
width:920px;
margin:0 auto;
}

Ceci fonctionne bien sur tous les navigateurs sauf iPhone et iPad où le
site est aligné à gauche de la page. On va dre que l'écran des
smartphone n'est pas adapté. Admettons... mais j'ai d'autres sites qui,
avec la même méthode, sont bien centrés même sur smartphones.

Pourquoi celui-ci en particulier fait-il du snobisme ?

TKS.
--
A+

Romer

10 réponses

1 2 3

SAM

27/10/2010 à 16:47

Le 27/10/10 11:57, Bernd a écrit :

Hi,
Petit soucis peu grave mais agaçant.
Je centre un site de largeur fixe de la manière suvante :

<body>
<div id="wraper">
... etc.
--------------------------------
#wraper{
position:relative;
width:920px;
left:50%;
margin-left:-460px;
}

ou au choix :

#wraper{
width:920px;
margin:0 auto;
}

Ceci fonctionne bien sur tous les navigateurs sauf iPhone et iPad où le
site est aligné à gauche de la page. On va dre que l'écran des
smartphone n'est pas adapté. Admettons... mais j'ai d'autres sites qui,
avec la même méthode, sont bien centrés même sur smartphones.

Pourquoi celui-ci en particulier fait-il du snobisme ?

920px ... même sur un aillephone ...
ça doit être un "poil" trop large, non ?
que reste t-il comme marge possible pour "centrer" ?
à mon idée : -220px ( ! ! ! )

Sauf à ce que le smartphone (son navigateur) s'en foute de ta largeur
fixe (comme Opera-Mini) ... ou qu'il réduise le zoom ... ça doit pas
être terrible.

Tu t'es renseigné sur les meta pour mobiles ?
(cf post ici : "Pour les petits écrans")

--
Stéphane Moriaux avec/with iMac-intel

romer

27/10/2010 à 18:48

SAM wrote:

920px ... même sur un aillephone ...
ça doit être un "poil" trop large, non ?
que reste t-il comme marge possible pour "centrer" ?
à mon idée : -220px ( ! ! ! )

Sauf à ce que le smartphone (son navigateur) s'en foute de ta largeur
fixe (comme Opera-Mini) ... ou qu'il réduise le zoom ... ça doit pas
être terrible.

Tu t'es renseigné sur les meta pour mobiles ?
(cf post ici : "Pour les petits écrans")

Il doit sans doute y avoir autre chose que je ne vois pas.
Je viens de réduire la largeur de wraper à 820px comme 3 autres sites
qui eux se centrent bien. Donc, celui-ci devrait se centrer avec cette
largeur. Il ne le fait toujours pas. Bizarre.
--
A+

Romer

unbewusst.sein

27/10/2010 à 20:47

SAM wrote:

920px ... même sur un aillephone ...

j'ai lu qqpart : 960x640

--
« L'amour est la sagesse du fou et la folie du sage. »
(Samuel Johnson)

Olivier Masson

28/10/2010 à 10:39

Le 27/10/2010 20:47, Une Bévue a écrit :

SAM wrote:

920px ... même sur un aillephone ...

j'ai lu qqpart : 960x640

Plutôt 640x960 en fait.
Pensez à utiliser les media queries.
Allez faire un tour sur cet article http://bit.ly/9nKHGz (alistapart)
pour quelques infos bien utiles.
Et découvrez ou redécouvrez http://fr.php.net/get_browser avec le
fichier browscap.ini.
Ou encore JS pour connaître la taille du viewport.

unbewusst.sein

28/10/2010 à 10:43

Olivier Masson wrote:

Plutôt 640x960 en fait.

c'est vrai, ça doit d'ailleurs dépendre du type d'aillephone 4 ou 3GS.

je crois bien que le 4 a le double de résolution...

--
« La télévision n'exige du spectateur qu'un acte de courage,
mais il est surhumain, c'est de l'éteindre. »
(Pascal Bruckner)

unbewusst.sein

28/10/2010 à 10:50

Olivier Masson wrote:

Et découvrez ou redécouvrez http://fr.php.net/get_browser avec le
fichier browscap.ini.

euh, y a t'il des smartphones avec php ?

une page intéressante :
<http://blog.jaysalvat.com/article/optimiser-son-application-web-pour-ip
hone-ou-ipod-touch>
<http://goo.gl/uPG9>

--
« La télévision n'exige du spectateur qu'un acte de courage,
mais il est surhumain, c'est de l'éteindre. »
(Pascal Bruckner)

Olivier Masson

28/10/2010 à 10:53

Le 28/10/2010 10:43, Une Bévue a écrit :

Olivier Masson wrote:

Plutôt 640x960 en fait.

c'est vrai, ça doit d'ailleurs dépendre du type d'aillephone 4 ou 3GS.

je crois bien que le 4 a le double de résolution...

Oui enfin, faut pas pousser non plus : l'Iphone3, GS ou pas, fait un
pauvre 320x480.

Olivier Masson

28/10/2010 à 10:56

Le 28/10/2010 10:50, Une Bévue a écrit :

Olivier Masson wrote:

Et découvrez ou redécouvrez http://fr.php.net/get_browser avec le
fichier browscap.ini.

euh, y a t'il des smartphones avec php ?

Gniii ? Depuis quand PHP est exécuté côté client ?
Mais sinon, oui il y a des portages de PHP sur smartphones.

une page intéressante :
<http://blog.jaysalvat.com/article/optimiser-son-application-web-pour-ip
hone-ou-ipod-touch>
<http://goo.gl/uPG9>

Ben ouais, faudrait surtout pas prendre en compte Android, qui bouffe
gentiment et rapidement les parts de marché de l'iphone, ni Blackberry,
ni Maemo, etc.

unbewusst.sein

28/10/2010 à 11:09

Olivier Masson wrote:

Gniii ? Depuis quand PHP est exécuté côté client ?

Ah zut ! pas réveillé je suis )))

--
« La télévision n'exige du spectateur qu'un acte de courage,
mais il est surhumain, c'est de l'éteindre. »
(Pascal Bruckner)

unbewusst.sein

28/10/2010 à 11:09

Olivier Masson wrote:

Oui enfin, faut pas pousser non plus : l'Iphone3, GS ou pas, fait un
pauvre 320x480.

c'est donc la moitié de ce que j'ai donné )))

--
« La télévision n'exige du spectateur qu'un acte de courage,
mais il est surhumain, c'est de l'éteindre. »
(Pascal Bruckner)

1 2 3

Centrer site sur smartphone

10 réponses

Veuillez sélectionner un problème