Blocage de la rotation des appareils sur les pages Web mobiles
Est-il possible de détecter sur ma page, par exemple à l'aide de Javascript, lorsqu'un utilisateur la visite à l'aide d'un appareil mobile en mode portrait, et d'empêcher le changement d'orientation lorsque l'utilisateur fait pivoter son téléphone en mode paysage? Il y a un jeu sur ma page, optimisé pour l'affichage en portrait uniquement et je ne le veux pas en paysage.
De nouvelles API sont en développement (et sont actuellement disponibles)!
screen.orientation.lock(); // webkit only
et
screen.lockOrientation("orientation");
Où "orientation" peut être l'un des éléments suivants:
portrait-primary - Il représente l'orientation de l'écran lorsqu'il est en mode portrait principal. Un écran est considéré dans son mode portrait principal si le périphérique est maintenu dans sa position normale et si cette position est en mode portrait, ou si la position normale du périphérique est en mode paysage et que le périphérique maintenu est tourné de 90 ° dans le sens des aiguilles d'une montre. La position normale dépend de l'appareil.
portrait-secondary - Il représente l'orientation de l'écran lorsqu'il est en mode portrait secondaire. Un écran est considéré en mode portrait secondaire si l’appareil est maintenu à 180 ° de sa position normale et si cette position est en portrait, ou si la position normale de l’appareil est en mode paysage et que l’appareil maintenu est tourné à 90 ° dans le sens inverse des aiguilles d’une montre. La position normale dépend de l'appareil.
landscape-primary - Il représente l'orientation de l'écran lorsqu'il est en mode paysage principal. Un écran est considéré comme étant en mode paysage principal si le périphérique est maintenu dans sa position normale et si cette position est en mode paysage ou si la position normale du périphérique est en mode portrait et que le périphérique maintenu est tourné de 90 ° dans le sens des aiguilles d'une montre. La position normale dépend de l'appareil.
landscape-secondary - Il représente l'orientation de l'écran lorsqu'il est en mode paysage secondaire. Un écran est considéré en mode paysage secondaire si l’appareil maintenu est à 180 ° de sa position normale et si cette position est en paysage ou si la position normale de l’appareil est en portrait et que l’appareil maintenu est tourné à 90 ° dans le sens inverse des aiguilles d’une montre. La position normale dépend de l'appareil.
portrait - Il représente à la fois portrait-primaire et portrait-secondaire.
paysage - Il représente à la fois paysage-primaire et paysage-secondaire.
default - Il représente le mode portrait primaire ou paysage dépendant de l'orientation naturelle des périphériques. Par exemple, si la résolution du panneau est de 1280 * 800, la valeur par défaut la transformera en paysage, si la résolution est de 800 * 1280, la valeur par défaut la transformera en portrait.
Mozilla recommande d'ajouter un écran lockOrientationUniversal à l'écran pour le rendre plus compatible avec tous les navigateurs.
screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
Allez ici pour plus d’informations: https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation
Dans les navigateurs activés par JavaScript, il devrait être facile de déterminer si l'écran est en mode paysage ou portrait et de compenser en utilisant CSS . Il peut être utile de donner aux utilisateurs la possibilité de désactiver cette option ou au moins de les avertir que la rotation des périphériques ne fonctionnera pas correctement.
Modifier
Le moyen le plus simple de détecter l’orientation du navigateur consiste à vérifier la largeur du navigateur par rapport à sa hauteur. Cela présente également l’avantage de savoir si le jeu est joué sur un appareil naturellement orienté en mode paysage (comme le sont certains appareils mobiles comme la PSP). Cela a plus de sens que d'essayer de désactiver la rotation du périphérique.
Modifier 2
Daz a montré comment détecter l'orientation d'un périphérique, mais détecter l'orientation ne représente que la moitié de la solution. Si vous souhaitez inverser le changement d'orientation automatique, vous devez tout faire pivoter à 90 ° ou à 270 °/90 °, par exemple.
$(window).bind('orientationchange resize', function(event){
if (event.orientation) {
if (event.orientation == 'landscape') {
if (window.rotation == 90) {
rotate(this, -90);
} else {
rotate(this, 90);
}
}
}
});
function rotate(el, degs) {
iedegs = degs/90;
if (iedegs < 0) iedegs += 4;
transform = 'rotate('+degs+'deg)';
iefilter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+iedegs+')';
styles = {
transform: transform,
'-webkit-transform': transform,
'-moz-transform': transform,
'-o-transform': transform,
filter: iefilter,
'-ms-filter': iefilter
};
$(el).css(styles);
}
Remarque: si vous souhaitez effectuer une rotation dans IE d'un angle arbitraire (à d'autres fins), vous devez utiliser une transformation de matrice, par exemple.
rads = degs * Math.PI / 180;
m11 = m22 = Math.cos(rads);
m21 = Math.sin(rads);
m12 = -m21;
iefilter = "progid:DXImageTransform.Microsoft.Matrix("
+ "M11 = " + m11 + ", "
+ "M12 = " + m12 + ", "
+ "M21 = " + m21 + ", "
+ "M22 = " + m22 + ", sizingMethod = 'auto expand')";
styles['filter'] = styles['-ms-filter'] = iefilter;
—Ou utilise CSS Sandpaper . En outre, cela applique le style de rotation à l'objet window, que je n'ai jamais testé et que je ne sais pas si cela fonctionne ou non. Vous devrez peut-être appliquer le style à un élément de document à la place.
Quoi qu'il en soit, je recommanderais toujours simplement d'afficher un message demandant à l'utilisateur de jouer au jeu en mode portrait.
semble bizarre que personne n'ait proposé la solution de requête de média CSS:
@media screen and (orientation: portrait) {
...
}
et l'option d'utiliser une feuille de style spécifique:
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">
MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#orientation
Code Javascript simple permettant d'afficher le navigateur mobile en portrait ou en paysage.
(Même si vous devez entrer le code html deux fois dans les deux DIV (un pour chaque mode), cela se chargera plus rapidement que d'utiliser du javascript pour changer la feuille de style ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mobile Device</title>
<script type="text/javascript">
// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
if(window.orientation==0)
{
document.getElementById('portrait').style.display = '';
document.getElementById('landscape').style.display = 'none';
}
else if(window.orientation==90)
{
document.getElementById('portrait').style.display = 'none';
document.getElementById('landscape').style.display = '';
}
}, false);
</script>
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
</head>
<body>
<div id="portrait" style="width:100%;height:100%;font-size:20px;">Portrait</div>
<div id="landscape" style="width:100%;height:100%;font-size:20px;">Landscape</div>
<script type="text/javascript">
if(window.orientation==0)
{
document.getElementById('portrait').style.display = '';
document.getElementById('landscape').style.display = 'none';
}
else if(window.orientation==90)
{
document.getElementById('portrait').style.display = 'none';
document.getElementById('landscape').style.display = '';
}
</script>
</body>
</html>
Testé et fonctionne sur Android HTC Sense et Apple iPad.
Avec les nouvelles fonctionnalités CSS3, vous pouvez faire pivoter la page dans le sens opposé. Désolé, pas de support IE7. :(.
var rotate = 0 - window.orientation;
setAttribute("transform:rotate("+rotate+"deg);-ms-transform:rotate("+rotate+"deg);-webkit-transform:rotate("+rotate+"deg)", "style");
Vous pouvez utiliser les propriétés screenSize.width et screenSize.height pour détecter la largeur> hauteur, puis gérer cette situation, soit en avertissant l'utilisateur, soit en modifiant votre écran en conséquence.
Mais la meilleure solution est ce que dit @ Doozer1979 ... Pourquoi voudriez-vous remplacer ce que l'utilisateur préfère?
Vous pouvez détecter le changement d’orientation, mais je ne pense pas que vous puissiez l’empêcher.