85

Je souhaite afficher mon site Web uniquement en mode paysage, est-ce possible? Peu importe l'orientation de l'appareil dans la main de l'utilisateur, mais le site Web sera toujours en mode paysage. J'ai vu une application iPhone fonctionner comme ça, mais cela peut-il être fait pour un site Web?

javascript html mobile-browser

— coure2011
source

3

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 .

— nnnnnn

Pas vraiment. Vous pouvez en quelque sorte le simuler en utilisant des transformations css, mais c'est moche, et je ne pense pas qu'il y ait un moyen de savoir si c'est à l'envers sur Android. À peu près sûr que cela a déjà été discuté ici.

— Dagg Nabbit

1

est-il possible de forcer le site Web à avoir une largeur minimale: 320px? donc si la taille de l'écran est de résolution inférieure, l'utilisateur devra faire défiler pour afficher le site complet. Ou puis-je agrandir une largeur de 240 pixels à un contenu de 320 pixels?

— coure2011

Je ne sais pas à quel point ce lien pourrait vous être utile, mais les dernières fonctionnalités [janvier 2020] suggèrent une nouvelle API pour le verrouillage d'orientation du W3C w3c.github.io/screen-orientation

— Sarath Sajan

117

@Golmaal a vraiment répondu à cela, je suis juste un peu plus bavard.

<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 déplaçant l'orientation, mais vous pouvez au moins lui envoyer un message. Cet exemple masquera l'emballage en mode portrait et affichera le message d'avertissement, puis masquera le message d'avertissement en mode paysage et affichera le portrait.

Je ne pense pas que cette réponse soit meilleure que @Golmaal, 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 vous POUVEZ le contrôler lorsque vous avez accès aux fonctionnalités natives.

Une autre mise à jour

Donc, après avoir sorti Cordova, c'est vraiment terrible à la fin. Il est préférable d'utiliser quelque chose comme React Native si vous voulez du JavaScript. C'est vraiment incroyable et je sais que ce n'est pas du Web pur mais que l'expérience Web pure sur mobile a échoué.

— Jason Sebring
source

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

— dhruvpatel

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

— Hitesh Misro

Vraiment utile, merci! Il convient de noter que cela ne semble pas fonctionner si vous le collez dans une feuille de style distincte.

— Mmm

Votre réponse est meilleure que celle à laquelle vous faites référence. Vous fournissez une solution réelle et recommandez un avertissement facile à mettre en œuvre au lieu de quelque chose de plus créatif et problématique. L'autre «réponse» vous a peut-être inspiré, mais c'était plus ou moins juste une question à haute voix. Cela aurait été mieux comme commentaire mentionnant l'existence de la orientationpropriété de groupe conditionnelle.

— Vince

46

Alors que j'attendrais moi-même ici une réponse, 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}
}

— Golmaal
source

35

Essayez ceci Cela peut ê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>

Développer l'extrait

Cela gérera automatiquement une rotation uniforme.

— M. A
source

7

Intelligent, mais ne fonctionne pas vraiment. Une grande partie de la page est inaccessible lorsqu'elle est tournée, car seul le contenu est pivoté et non le navigateur réel.

— Graham

2

Cela briserait toute animation et détruirait probablement la réactivité mobile de la page.

— Wissam El-Kik

2

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%);
    }
  }
}

— Kraken
source

belle idée .. des artefacts / bruit lors du basculement entre portrait / paysage?

— hko

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

@Golmaal a vraiment répondu à cela, je suis juste un peu plus bavard.