web-dev-qa-db-fra.com

Site mobile - Forcer le paysage uniquement/pas de rotation automatique

J'ai un site qui a une feuille de style mobile:

<link rel="stylesheet" href="css/mobile.css" media="handheld">

J'utilise également jQuery pour rechercher des périphériques mobiles et modifier les fonctionnalités en conséquence.

Mais je veux savoir s’il existe un moyen de forcer l’orientation paysage uniquement et de désactiver la rotation automatique? Un CSS ou une solution jQuery serait bien.

Merci!

jquerycssmobilelandscapeautorotate
23
Joey

Utilisez des requêtes multimédia pour tester l'orientation. Dans la feuille de style Portrait, masquez tout et affichez un message indiquant que l'application ne fonctionne qu'en mode Paysage.

<link rel="stylesheet" type="text/css" href="css/style_l.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">

Je pense que c'est mieux aproach

17
daver

Vous ne pouvez pas forcer l'orientation dans une page Web, mais vous pouvez suggérer ou bloquer du contenu en mode portarit. 

J'ai fait un adaptation d'un script existant

dans votre fichier html ajouter un élément div 

<div id="block_land">Turn your device in landscape mode.</div>

Puis adaptez votre css pour couvrir toute votre page 

#block_land{position:absolute; top:0; left:0; text-align:center; background:white; width:100%; height:100%; display:none;}

Ensuite, ajoutez un peu de javascript pour détecter l'orientation 

function testOrientation() {
  document.getElementById('block_land').style.display = (screen.width>screen.height) ? 'none' : 'block';
}

N'oubliez pas de tester l'orientation dans les changements de charge et de changement, peut-être dans votre balise body

<body onorientationchange="testOrientation();" onload="testOrientation();">

Faites-moi savoir si cette solution fonctionne pour vous.

16
Yoann

Je pense que la meilleure approche est le script afin que lorsque l'utilisateur change, il change. J'ai modifié cela afin qu'il fasse pivoter votre page principale DIV lorsque en portrait, forçant l'utilisateur à changer. Sauf s'ils veulent incliner la tête sur le côté:

<script type="text/javascript">
    (function () {
        detectPortrait();
        $(window).resize(function() {
            detectPortrait("#mainView");
        });


        function detectPortrait(mainDiv) {
            if (screen.width < screen.height) {
                $(mainDiv).addClass("portrait_mode");
            }
            else {
                $(mainDiv).removeClass("portrait_mode");
            }
        }
    })();
</script>
<style type="text/css">
    .portrait_mode {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
</style>
3
Thomas Watson

Un moyen simple de forcer l'orientation paysage est de définir votre largeur min-max dans votre code CSS, essayez d'utiliser ce code

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { 
body {
-webkit-transform: rotate(90deg);
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0; 
}}

espérons résoudre votre problème.

0
Rizky Ariestiyansyah

J'ai essayé le code suivant et cela a forcé le navigateur à utiliser le mode portrait:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />

Ce code a été testé sur un iPhone et sur un autre appareil mobile.

0
Wissam El-Kik