J'essaie de désactiver la rotation du téléphone affectant la page Web de l'une de mes applications mobiles HTML5. Pas de réorganisation de la mise en page, de redimensionnement, de comportement de manière d'orientation.
Je le veux afin que vous faites pivoter le téléphone et que la mise en page initiale chargée reste la même, forçant l'utilisateur à l'aide de l'application dans l'orientation d'origine. Il y a beaucoup de subtilités à la logique utilisateur et je pense vraiment que cela est nécessaire dans mon application, alors s'il vous plaît, pas de commentaires sur ce choix, aidez plutôt à ma question dans la première phrase. P>
J'ai essayé d'écouter des événements "OrientationChanger" et "Redimensionner" et appelez PreventDeFault et d'arrêt de protection contre eux, afin d'éviter tout comportement de navigateur de réorganisation de la page d'adapter une vue paysagiste lorsqu'il est tourné. Bien, empêchant évidemment quoi que ce soit (idéalement). p>
fait absolument aucune différence. Le navigateur a toujours réorganisé la page sur Android (Pre2.1 et après) et iPhone 4-5. P> Essayé META Tags P>
regarda furieusement sur Stackoverflow, a vu ce que j'ai fait à l'étape 1. Situé plusieurs fois ... J'ai essayé de m'assurer que je ne jouais pas quelque chose de plus. N'a pas fonctionné. P> li>
aspiré dans ma fierté, puis décidé de continuer à courir dans un mur de briques à la place de la fierté, puis aspiré dans ma fierté et posté ici. P> Li>
ol> halp. p> p>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
5 Réponses :
Ajout Android: configchange = "KeyboardHéstine | Orientation" à votre AndroidManifest.xml. Cela indique au système quelles modifications de la configuration vous allez vous gérer - dans ce cas en ne faisant rien.
Application Web, non autochtone. Plus précisément, il devrait y avoir une solution JavaScript que j'ai manquée
Vous ne pouvez pas désactiver l'orientation mobile dans l'application Web. Ce que vous pouvez faire est de faire tourner la page au portrait (en utilisant la rotation CSS à partir de JS) lorsqu'elles changent d'orientation vers le modèle horizontal. De cette manière, ils seront obligés d'utiliser votre application Web en mode portrait.
Vous pouvez également leur montrer un message ("Mode portrait uniquement" quand ils essaient de visualiser en mode horizontal)
Je l'ai fait en utilisant les travaux suivants autour, ce qui demande à l'utilisateur de revenir en mode portrait.
Une fois que l'utilisateur retourne en mode portrait, il sera autorisé à interagir avec application.
<head>
<style type="text/css">
#landscape{
position: absolute;
top: 0px;
left: 0px;
background: #000000;
width: 100%;
height: 100%;
display: none;
z-index: 20000;
opacity: 0.9;
margin:0 auto;
}
#landscape div{
color: #FFFFFF;
opacity: 1;
top: 50%;
position: absolute;
text-align: center;
display: inline-block;
width: 100%;
}
</style>
<script>
function doOnOrientationChange()
{
switch(window.orientation)
{
case -90:
document.getElementById("landscape").style.display="block";
break;
case 90:
document.getElementById("landscape").style.display="block";
break;
default:
document.getElementById("landscape").style.display="none";
break;
}
}
//Listen to orientation change
window.addEventListener('orientationchange', doOnOrientationChange);
</script>
</head>
<body onload="doOnOrientationChange();">
<div id="landscape"><div>"Rotate Device to Portrait"</div></div>
</body>
Je pense que c'est une solution assez élégante. Juste mon avis :)
fenêtre.orientation n'est pas fiable. -90 ° peut être portrait sur certains appareils. L'orientation 0 est juste l'orientation par défaut de l'appareil.
La solution évidente consiste à utiliser JavaScript pour cela:
if(window.innerHeight > window.innerWidth){
document.getElementsByTagName("body")[0].style.transform = "rotate(90deg)";
}
Ne devrait-il pas être si (fenêtre.innerheight> window.innerwidth) {document.getelementsbytagname ("corps") [0] .style.transform = "Tourner (90deg)"; }
@KunalDethe fixe. Merci!
@ Matian2040 - dépend du périphérique / du navigateur. Juste un exemple de quoi faire. Il y a probablement de meilleures solutions là-bas. Et cela ne devrait probablement pas être fait en premier lieu ...
Gardez-le court et simple! :]
p>
window.addEventListener('orientationchange', function ()
{
if (window.innerHeight > window.innerWidth)
{
document.getElementsByTagName('body')[0].style.transform = "rotate(90deg)";
}
});Vous avez un petit bug là-bas, devrait être documentaire.getelementsbytagname ("corps") [0] .style.transform = "Tourner (90deg)";
Vous avez raison! Merci. Le code a été mis à jour.
Les appareils mobiles fournissent une mise à l'échelle et la rotation des utilisateurs , pas des développeurs. Pourquoi voulez-vous le supprimer?
@Robi je pense que vous êtes confus.
@Robg désolé d'être Curt, mais ce n'est pas le point.
Les commentaires sont fournis aux autres pour commenter votre question. Si vous n'avez pas de bonne raison pour prévenir l'échelle et la rotation, vous pouvez le laisser tomber à partir de vos besoins et votre problème est résolu. En outre, votre raison de supprimer une fonctionnalité d'interface utilisateur natale devrait l'emporter sur le besoin d'un utilisateur de l'utiliser. Vous n'avez pas fourni de raison. Une bonne raison d'autoriser la rotation est qu'elle agrandit le texte sans chanter la mise en page. Le zoom fait la même chose. Le con est que les utilisateurs devront peut-être paniquer pour voir tout le contenu - mais c'est leur choix. Quelles sont vos raisons pour supprimer ces caractéristiques et ces choix?
@ROBG Si son raisonnement est correct n'est pas la question f'n. S'il pense que son application est meilleure sans elle qui est à lui. Je ne pense tout simplement pas que ce soit possible. La seule chose à laquelle je puisse penser, c'est casser une rotation CSS lorsque la largeur de la fenêtre est plus grande que sa hauteur.
@fancy - Ceci est un forum ouvert, Personnes Post, d'autres répondent. J'ai posté comme un commentaire, pas une réponse, car je ne répondrai pas à la question sans raison pour mettre en œuvre quelque chose que je pense brise la convivialité.
@Robg lol, so noble - je ne pense pas avoir une réponse, du moins pas pour iOS.
Il suffit de connecter une discussion connexe: [ Stackoverflow.com/questions/1207008/... [1]: Stackoverflow.com/questions/1207008/...
écran.lockorientation une fois qu'il est adopté: Stackoverflow.com/questions/1207008/...