1486 sujets

Web Mobile et responsive web design

[Résolu] Bloquer le mode portrait ou paysage pour un site mobile? (et

Bonjour voilà j'aimerais continuer mon site internet mais lors du passage paysage -> portrait ou l'inverse le design ne s'adapte pas très bien. Alors que le site lancé ou raf'raichis dans chacun de ces deux modes est bien. Alors je pensais bloquer un de ces deux modes ? Est-ce possible ?
Sinon je me demandais serait-il possible de bloquer le zoom d'un smartphone ou tactile ?
salut,

essaies avec : 

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
C'est déconseillé de bloquer le zoom, il y a des personnes qui ont vraiment besoin d'agrandir la page pour pouvoir lire.
Bloquer le zoom d'accord je peux m'en passer je pense, mais bloquer le changement de mode entre portrait et paysage c'est déconseillé aussi ou il y a un moyen ?
Merci de votre aide. Smiley confused
Ben quand tu dis que ça ne s'adapte pas très bien, tu veux dire quoi exactement? On peut cibler avec les media queries quand la tablette est en mode portrait ou payasage et adapter le design…
J'ai un script en JavaScript qui redimensionne ma page suivant la largeur résolution etc d'un navigateur. Allier à l'évènement resize il se déclenche dès que je redimensionne une fenêtre. Cependant quand je passe en mode portrait ou en paysage (suivant que j'ai lancé la page dans le mode opposé bien sur) je me retrouve avec un déforme ment a droite par déforme ment j’entends une marge énorme a droite de ma page. (sur ipad)
Et les média query je dois pas être assez doué car XD j'arrive même pas a changer une bordure en rouge sur mon ipod (oui je test mon site sur les trois format cité en attendant d'avoir une plate forme android.
re,

tu devrais montrer les codes.

sinon rapidement, il n'y aurait (peut être) pas une piste du côté de l'évènement resize sous IOS justement ? en fonction des attributs/valeurs passés dans le méta viewport, il se peut que cet évènement se déclenche au chargement de la page, ce qui pourrait peut être entrainer des comportements inattendus ... (je dis peut être des âneries ...)

bon mais comme le précise Patidou, c'est quand même mieux de passer par des "media queries" pour adapter ta page.
Modifié par o06 (04 Jun 2012 - 17:44)
Je vais essayer de gérer par média queries, je vous tiendrais au courant pour ce qui est de montrer mes codes vu que j'ai beaucoup de lignes sur beaucoup de fichier que ce soit html css ou js et que si comme a mon dernier problème de js ca revient a une ligne de CSS XD je pense que je peux encore chercher du moins a réduire la zone de recherche pour vous montrer les lignes qui causent problèmes Smiley confused Merci beaucoup a vous je vais essayer et si celà ne marche pas je reviendrais avec mon code sous le bras Smiley cligne
voila je test juste sur mon ipod si les media queries fonctionne, 

<link rel="stylesheet" media=" handheld" href="styles/CSSmobile.css" type="text/css" />



#conteneur{display:none;}

Mais mon conteneur s'affiche encore sur mon ipod. je pense être maudit XD
Le query n'est pas bon, le media handeld est un vieux media, valable sur une ancienne version d'Opera Mini avec des gsm basiques. On peut l'utiliser bien sûr mais il faut ajouter d'autres paramètres.


Si tu veux utiliser plusieurs fichiers css, tu dois utiliser une syntaxe du style :

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


Perso j'utilise une feuille de style avec les queries dans le fichier css.
Modifié par Patidou (05 Jun 2012 - 14:43)
bah j'avais lut que handheld servait pour mobile je me suis dit que spécialisé la média ne permettrait pas de voir si cela marchais d’où mon code bidon du coup je vais essayer de raffiner la média querie. Merci à toi
Modérateur
Bloodymeister a écrit :
bah j'avais lut que handheld servait pour mobile je me suis dit que spécialisé la média ne permettrait pas de voir si cela marchais d’où mon code bidon du coup je vais essayer de raffiner la média querie. Merci à toi


C'est parfaitement juste du point de vue des spécifications et des standards. Ce n'est pas un vieu média du tout, c'est juste que ce média n'est pas pris en compte par les navigateurs. Smiley cligne
Merci a vous j'ai une piste valable et des résultats je vais peaufiner le tout maintenant en calibrant petit a petit tout ce qui ne va pas. Merci a vous pour votre temps et votre aide.
kustolovic a écrit :


(…) c'est juste que ce média n'est pas pris en compte par les navigateurs. Smiley cligne


Pour être précis, n'est plus pris en compte par les navigateurs actuels. Smiley cligne
peu être un peu tard pour répondre mais ayant rencontrer se problème aussi , menu qui au lieu de faire 100% de largeur passe a 60 lors de la rotation , j'ai utilise ceci pour faire un refresh automatique du css :


<link rel="stylesheet" media="all and (orientation:portrait)" href="css/style.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="css/style2.css">

ce sont les 2 mêmes css. juste que la au passage de rotation il le refresh obligatoirement , et plus de problème Smiley smile
Merci beaucoup c'est vrai que le design ne se rafraichis pas lors du changement d'orientation j'avais pas pensé à forcer le rafraichissement du css :o merci beaucoup de l'astuce =).
Je viens de tester cette astuce sous ics4, sans succès.
Pas de refresh au changement d'orientation.
Et chez vous ?
Sujet clos
Aller à