Comment verrouiller l'orientation en mode portrait dans une application Web iPhone?
https://stackoverflow.com/questions/1207008
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je suis en train de créer une application Web pour iPhone et je souhaite verrouiller l'orientation en mode portrait. Est-ce possible? Existe-t-il des extensions de kit Web pour cela?
Veuillez noter qu'il s'agit d'une application écrite en HTML et JavaScript pour Mobile Safari. Il ne s'agit PAS d'une application native écrite en Objective-C.
La solution
Vous pouvez spécifier des styles CSS en fonction de l'orientation de la fenêtre: Ciblez le navigateur avec body [orient = & Quot; paysage & Quot;] ou body [orient = & Quot; portrait & Quot;]]
http://www.evotech.net / blog / 2007/07 / développement-web-pour-l'iphone /
Cependant ...
L’approche d’Apple sur ce problème consiste à autoriser le développeur à modifier le code CSS en fonction du changement d’orientation, sans pour autant empêcher une réorientation complète. J'ai trouvé une question similaire ailleurs:
http: // ask. metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari
Autres conseils
C’est une jolie solution, mais c’est au moins quelque chose (?). L'idée est d'utiliser une transformation CSS pour faire pivoter le contenu de votre page en mode quasi-portrait. Voici le code JavaScript (exprimé en jQuery) pour vous aider à démarrer:
$(document).ready(function () {
function reorient(e) {
var portrait = (window.orientation % 180 == 0);
$("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
}
window.onorientationchange = reorient;
window.setTimeout(reorient, 0);
});
Le code s'attend à ce que tout le contenu de votre page vive à l'intérieur d'un div, juste à l'intérieur de l'élément body. Il tourne ce div de 90 degrés en mode paysage - retour au portrait.
Gauche en tant qu’exercice pour le lecteur: la division tourne autour de son point central; sa position devra donc probablement être ajustée, sauf si elle est parfaitement carrée.
En outre, il existe un problème visuel peu attrayant. Lorsque vous changez d'orientation, Safari tourne lentement, puis la division de niveau supérieur s'aligne sur 90 degrés différents. Pour encore plus de plaisir, ajoutez
body > div { -webkit-transition: all 1s ease-in-out; }
à votre CSS. Lorsque le périphérique tourne, Safari le fait, puis le contenu de votre page le fait. Séduire!
Cette réponse n’est pas encore possible, mais je l’affiche pour & "Les générations futures &"; Espérons que nous pourrons le faire un jour via la règle CSS @viewport:
@viewport {
orientation: portrait;
}
Spec (en cours de traitement):
https://drafts.csswg.org/css-device-adapt/#orientation -desc
MDN:
https://developer.mozilla.org/en-US/ docs / Web / CSS / @ viewport / orientation
Sur la base du tableau de compatibilité du navigateur MDN et de l'article suivant, il semblerait que certaines versions d'IE et d'Opera soient prises en charge:
http://menacingcloud.com/?c=cssViewportOrMetaTag
Cette spécification d'API JS semble également pertinente:
https://w3c.github.io/screen-orientation/
J'avais supposé que parce que cela était possible avec la règle @viewport proposée, cela serait possible en définissant orientation dans les paramètres de la fenêtre d'affichage dans une balise meta, mais cela n'a pas abouti jusqu'à présent. .
N'hésitez pas à mettre à jour cette réponse à mesure que les choses s'améliorent.
Le code suivant a été utilisé dans notre jeu html5.
$(document).ready(function () {
$(window)
.bind('orientationchange', function(){
if (window.orientation % 180 == 0){
$(document.body).css("-webkit-transform-origin", "")
.css("-webkit-transform", "");
}
else {
if ( window.orientation > 0) { //clockwise
$(document.body).css("-webkit-transform-origin", "200px 190px")
.css("-webkit-transform", "rotate(-90deg)");
}
else {
$(document.body).css("-webkit-transform-origin", "280px 190px")
.css("-webkit-transform", "rotate(90deg)");
}
}
})
.trigger('orientationchange');
});
J'ai mis au point cette méthode CSS uniquement consistant à faire pivoter l'écran à l'aide de requêtes multimédia. Les requêtes sont basées sur les tailles d'écran que j'ai trouvées ici. . 480px semblait être un avantage, car peu de périphériques avaient une largeur supérieure à 480px ou une hauteur inférieure à 480px.
@media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) {
html{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
width: 320px; /*this is the iPhone screen width.*/
position: absolute;
top: 100%;
left: 0
}
}
Screen.lockOrientation() résout ce problème, même si la prise en charge n’est pas universelle à l’époque (avril 2017):
https://www.w3.org/TR/screen-orientation/
https://developer.mozilla.org/en -US / docs / Web / API / Screen.lockOrientation
J'aime l'idée de dire à l'utilisateur de remettre son téléphone en mode portrait. Comme mentionné ici: http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ... mais en utilisant CSS au lieu de JavaScript.
Peut-être que dans un nouvel avenir, il aura une soludion prête à l'emploi ...
En ce qui concerne mai 2015,
il existe une fonctionnalité expérimentale qui le fait.
Mais cela ne fonctionne que sur Firefox 18+, IE11 + et Chrome 38 +.
Cependant, cela ne fonctionne pas encore sur Opera ou Safari.
Voici le code actuel des navigateurs compatibles:
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
lockOrientation("landscape-primary");
// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px
html {
width: 320px;
overflow-x: hidden;
}
Ceci, ou une solution CSS similaire, préservera au moins votre mise en page si c'est ce que vous recherchez.
La solution racine comptabilise les capacités du périphérique plutôt que d'essayer de les limiter. Si le périphérique ne vous permet pas la limitation appropriée, un simple piratage est votre meilleur choix, car la conception est essentiellement incomplète. Le plus simple sera le mieux.
Au café si quelqu'un en a besoin.
$(window).bind 'orientationchange', ->
if window.orientation % 180 == 0
$(document.body).css
"-webkit-transform-origin" : ''
"-webkit-transform" : ''
else
if window.orientation > 0
$(document.body).css
"-webkit-transform-origin" : "200px 190px"
"-webkit-transform" : "rotate(-90deg)"
else
$(document.body).css
"-webkit-transform-origin" : "280px 190px"
"-webkit-transform" : "rotate(90deg)"
Bien que vous ne puissiez empêcher le changement d'orientation de prendre effet, vous ne pouvez émuler aucun changement comme indiqué dans d'autres réponses.
Commencez par détecter l'orientation ou la réorientation du périphérique et, à l'aide de JavaScript, ajoutez un nom de classe à votre élément d'habillage (dans cet exemple, j'utilise la balise body).
function deviceOrientation() {
var body = document.body;
switch(window.orientation) {
case 90:
body.classList = '';
body.classList.add('rotation90');
break;
case -90:
body.classList = '';
body.classList.add('rotation-90');
break;
default:
body.classList = '';
body.classList.add('portrait');
break;
}
}
window.addEventListener('orientationchange', deviceOrientation);
deviceOrientation();
Ensuite, si l'appareil est en mode paysage, utilisez CSS pour définir la largeur du corps sur la hauteur de la fenêtre et la hauteur du corps sur la largeur de la fenêtre. Et laissez & # 8217; définir l'origine de la transformation pendant que nous & # 8217; y sommes.
@media screen and (orientation: landscape) {
body {
width: 100vh;
height: 100vw;
transform-origin: 0 0;
}
}
Maintenant, réorientez l'élément body et faites-le glisser vers sa position.
body.rotation-90 {
transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
transform: rotate(-90deg) translateX(-100%);
}
Inspiré de la réponse de @ Grumdrig, et parce que certaines des instructions utilisées ne fonctionneraient pas, je suggère le script suivant si quelqu'un d'autre en a besoin:
$(document).ready(function () {
function reorient(e) {
var orientation = window.screen.orientation.type;
$("body > div").css("-webkit-transform", (orientation == 'landscape-primary' || orientation == 'landscape-secondary') ? "rotate(-90deg)" : "");
}
$(window).on("orientationchange",function(){
reorient();
});
window.setTimeout(reorient, 0);
});
Cliquez ici pour suivre un tutoriel et y travailler. exemple de mon site web.
Vous n'avez plus besoin d'utiliser des hacks pour regarder jQuery Mobile Screen Orientation, vous ne devez plus utiliser PhoneGap, sauf si vous utilisez réellement PhoneGap.
Pour que cela fonctionne en 2015, nous avons besoin de:
- Cordova (toute version supérieure à 4.0 est préférable)
- PhoneGap (vous pouvez même utiliser PhoneGap, les plugins sont compatibles)
Et l'un de ces plugins selon votre version de Cordova:
- net.yoik.cordova.plugins.screenorientation (Cordova < 4)
plugin cordova ajouter net.yoik.cordova.plugins.screenorientation
- Le plugin Cordova ajoute l'orientation de l'écran Cordova (Plugin > = 4)
plugin cordova ajoute cordova-plugin-orientation-orientation
Et pour verrouiller l'orientation de l'écran, utilisez simplement cette fonction:
screen.lockOrientation('landscape');
Pour le déverrouiller:
screen.unlockOrientation();
Orientations possibles:
-
portrait-primaire l'orientation est en mode portrait principal.
-
portrait-secondaire l'orientation est en mode portrait secondaire.
-
paysage-primaire l'orientation est en mode paysage principal.
-
paysage-secondaire l'orientation est en mode paysage secondaire.
-
portrait : l'orientation est soit portrait-primaire, soit portrait-secondaire (capteur).
-
paysage l'orientation est paysage-primaire ou paysage-secondaire (capteur).
