Comment verrouiller l'orientation en mode portrait dans une application Web mobile?

Je fais une application web en utilisant html, et javascript pour les appareils mobiles (téléphones). Comment puis-je verrouiller l'orientation de l'écran en mode portrait? Existe-t-il des extensions ou des cadres pour cela? Quand l'utilisateur passe en mode paysage, je veux afficher seulement un div (sous la forme d'une boîte si cela est important) qui contient le texte "s'il vous plaît mettez votre appareil en mode portrait."Comment verrouiller l'orientation en mode portrait dans une application Web mobile?

Source

2015-04-29 StevenR

jetez un oeil à cette autre question: http://stackoverflow.com/questions/3501510/blocking-device-rotation-on-mobile-web-pages – rikpg

Il y a un événement pour détecter 'orientationChange'. Toutefois, le verrouillage de la résolution de l'écran n'est pas une bonne option pour un site Web réactif. Mieux gérer cela – Praveen

essayez ceci;

$(window).on("orientationchange",function(){ 
event.stopPropagation(); 
});

Source

2015-04-29 18:28:02

Cela n'a pas fonctionné. Où recommanderiez-vous de le mettre. – StevenR

https://api.jquerymobile.com/orientationchange/ –

Cet événement existe dans jQuery mobile et attrape le même événement que l'équivalent CSS, donc vous pouvez l'utiliser, mais il n'y a pas de 'event.stopPropagation()' ou ' event.preventDefault() 'qui ferait ce travail. Vous devez toujours écrire une solution personnalisée, pour laquelle vous pouvez utiliser la valeur de 'event.orientation'. – zpr

Vous pouvez utiliser quelque chose comme la requête média CSS suivant:

@media screen and (orientation: landscape) { 
    .main-content { display: none; } 
    .use-portrait { display: block; } 
}

qui cacherait votre main-content et montrer la use-portrait div lorsque l'appareil est en mode paysage. Vous pouvez utiliser un CSS supplémentaire pour faire tourner la div use-portrait pour attirer davantage l'utilisateur à faire:

.use-portrait { 
    -webkit-transform: rotate(90deg);  
    transform: rotate(90deg); 
}

Et vous devrez peut-être de le traduire pour apparaître correctement.

Source

2016-04-19 21:00:55 zpr

Comment verrouiller l'orientation en mode portrait dans une application Web mobile?

Répondre

Questions connexes