Web pour tablettes ipad/android et résolution portrait/paysage

Tout est dans le sujet.

Connaitriez vous ? ou pourriez vous me guider vers des ressources qui permettraient d'afficher automatiquement et correctement selon la résolution de la tablette (chrome/safari).

par exemple cacher le menu si on est en portait et l'afficher si on est en paysage (avec du js je suppose pour pouvoir le faire automatiquement selon la manière dont la tablette est tenue)

merci d'avance de votre aide

Bonjour,

Regardes du coté des media queries genre

@media screen and (orientation:portrait) {

#menu {
display : none;
}

}

@media screen and (orientation:landscape) {

#menu {
display : block;
}

}

http://www.alsacreations.com/article/lire/930-css3-media-queries.html

Grâce aux media queries.

je matte, merci

pour être plus complet, je voudrais vouloir faire ce que fait allociné sur sa version ipad (si cela peut vous donner une idée

Bonjour,

Juste en terme d'accessibilité, tu dis vouloir supprimer le menu sur la version portrait, comment navigue-t'on alors ?

Sinon, il est possible d'utiliser JS pour comparer que "hauteur du viewport" est plus petit ou plus grand que l"argeur du viewport".
Modifié par Laurie-Anne (14 Feb 2011 - 08:54)

en ne laissant qu'un petit bout d'onglet sur le coté, qui au "click" du doigt fait réapparaitre le menu

P.S.: ce que fait l'appli allociné sur ipad est ce qui ressemble le plus à ce que je voudrais faire dans le genre
Modifié par Alkhan (14 Feb 2011 - 21:05)

Bonjour,

Un des liens en bas de l'article sur les Media Queries renvoie à un tuto dans lequel l'emploi de la propriété "orientation" semble réservée à l'iPad: "Webkit on the iPad honors CSS media query declarations based on orientation" (sur http://www.cloudfour.com/ipad-css/). Quid de l'iPhone, et des autres terminaux?
Jusqu'à présent, je pensais qu'à chaque changement d'orientation de l'écran, le contenu se réorganisait en fonction des règles établies, comme quand on change la taille de la fenêtre de son navigateur... Ça n'a pas l'air d'être le cas (mais je n'ai pas d'iPhone pour tester, juste un feedback qu'on m'a envoyé).

"orientation" fonctionne aussi sur iPhone et autres smartphones/tablettes.

@Patidou OK, merci.
Donc sans "orientation", le terminal ne vas pas resizer le contenu en fonction de la largeur automatiquement, et conserver l'affichage initial?
J'ai conscience d'ouvrir une parenthèse dans ce topic, mais je pense que ça intéressera tout le monde s'il s'avère que le mode paysage n'est pas obligatoire (dans mon cas, je veux pouvoir tenir compte de la largeur de l'écran du terminal, peu importe sa hauteur, donc son orientation).
Modifié par Transat (29 Nov 2011 - 08:46)

J'ai été voir ton lien, il prend juste l'iPad en exemple. Ici au bureau j'ai un écran 16/9 avec firefox (win7) en plein écran et c'est bien le style landscape qui fonctionne. Si je réduit la fenêtre en largeur, le navigateur va appliquer le style "portrait".

Maintenant je ne sais pas ce que tu veux faire exactement… Sur mon site perso, pour les mobiles, je ne tiens pas compte du mode portrait ou paysage : les colonnes sont supprimées, le contenu est mis à la suite et s'adapte à la largeur de l'écran.

J'ai juste ajouté une règle pour l'ipad en mode portrait.

OK, c'est ce que je voulais savoir. Mon site (http://india-pale-ale.fr) s'adapte aussi à la largeur de l'écran, point barre. Quelqu'un équipé d'un iPhone me dit "ça ne gère pas le mode paysage", et j'en ai déduit qu'après avoir basculé son appareil, cette personne avait constaté que le contenu restait collé dans un coin Mais c'était sûrement pour me faire bisquer. Bon, j'en aurai le cœur net, en testant par moi-même. Merci.
Modifié par Transat (30 Nov 2011 - 10:16)