85 votes

forcer le site web à s'afficher uniquement en mode paysage

Je veux afficher mon site Web en mode paysage uniquement, est-ce possible ? L'orientation de l'appareil dans la main de l'utilisateur importe peu, mais le site web sera toujours en mode paysage. J'ai vu des applications iPhone fonctionner de cette manière, mais est-ce possible pour un site web ?

3 votes

Bonne question, mais je parie que la réponse est "Pas possible", bien que vous puissiez en quelque sorte tricher : stackoverflow.com/a/4807047/615754 .

0 votes

Pas vraiment. Vous pouvez le simuler en utilisant des transformations css mais c'est laid, et je ne pense pas qu'il y ait un moyen de savoir si c'est à l'envers sur Android. Je suis presque sûr que ce sujet a déjà été abordé ici.

1 votes

Est-il possible de forcer un site web à avoir une largeur minimale de 320px ? Ainsi, si la taille de l'écran est d'une résolution inférieure, l'utilisateur devra faire défiler l'écran pour voir le site en entier. Ou est-il possible d'agrandir la largeur de 240px pour obtenir un contenu de 320px ?

117voto

Jason Sebring Points 4309

@Golmaal a vraiment répondu à cette question, je suis juste un peu plus verbeux.

<style type="text/css">
    #warning-message { display: none; }
    @media only screen and (orientation:portrait){
        #wrapper { display:none; }
        #warning-message { display:block; }
    }
    @media only screen and (orientation:landscape){
        #warning-message { display:none; }
    }
</style>

....

<div id="wrapper">
    <!-- your html for your website -->
</div>
<div id="warning-message">
    this website is only viewable in landscape mode
</div>

Vous n'avez aucun contrôle sur l'utilisateur qui déplace l'orientation, mais vous pouvez au moins lui envoyer un message. Dans cet exemple, le wrapper sera masqué en mode portrait et le message d'avertissement sera affiché, puis le message d'avertissement sera masqué en mode paysage et le portrait sera affiché.

Je ne pense pas que cette réponse soit meilleure que celle de @Golmaal, mais seulement un compliment. Si vous aimez cette réponse, assurez-vous de donner le crédit à @Golmaal.

Mise à jour

J'ai beaucoup travaillé avec Cordova récemment et il s'avère que l'on peut le contrôler lorsque l'on a accès aux fonctionnalités natives.

Une autre mise à jour

Donc, après avoir publié Cordova, c'est vraiment terrible au final. Il est préférable d'utiliser quelque chose comme React Native si vous voulez du JavaScript. C'est vraiment étonnant et je sais que ce n'est pas du pur web, mais l'expérience du pur web sur le mobile a en quelque sorte échoué.

0 votes

C'est ma journée ! c'est vraiment pratique script pour forcer le mode paysage sur les petits appareils en mettant un beau message.

0 votes

Vous avez obtenu la plupart du crédit cependant ;) +1d pour votre réponse bien décrite et @Golmaal

0 votes

Très utile, merci ! Il est intéressant de noter que cela ne semble pas fonctionner si vous le placez dans une feuille de style séparée.

46voto

Golmaal Points 368

Bien que j'attende moi-même une réponse ici, je me demande si cela peut être fait via CSS :

@media only screen and (orientation:portrait){
#wrapper {width:1024px}
}

@media only screen and (orientation:landscape){
#wrapper {width:1024px}
}

36voto

Mr. A Points 86

Essayez ceci. Cela pourrait être plus approprié pour vous

#container { display:block; }
@media only screen and (orientation:portrait){
  #container {  
    height: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@media only screen and (orientation:landscape){
  #container {  
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     transform: rotate(0deg);
  }
}

<div id="container">
    <!-- your html for your website -->
    <H1>This text is always in Landscape Mode</H1>
</div>

Cela permettra de gérer automatiquement la rotation régulière.

8 votes

C'est astucieux, mais ça ne fonctionne pas vraiment. Une grande partie de la page est inaccessible lorsqu'elle est tournée, car seul le contenu est tourné et non le navigateur lui-même.

3 votes

Cela casserait toute animation et détruirait probablement la réactivité de la page pour les téléphones portables.

2voto

Kraken Points 11

J'ai dû jouer avec les largeurs de mes conteneurs principaux :

html {
  @media only screen and (orientation: portrait) and (max-width: 555px) {
    transform: rotate(90deg);
    width: calc(155%);
    .content {
      width: calc(155%);
    }
  }
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X