Site Mobile - force paysage, à seulement / pas de rotation automatique de l'

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

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

Je suis aussi à l'aide de jQuery pour vérifier pour les appareils mobiles et d'en altérer la fonctionnalité en conséquence.

Mais je veux savoir si il existe un moyen de forcer en mode paysage uniquement de l'orientation et de désactiver la rotation automatique de l'? Un CSS ou jQuery solution serait parfait.

Merci!

InformationsquelleAutor Joey | 2012-06-11

17

Utiliser les media queries pour tester l'orientation, dans le portrait de la feuille de style tout cacher et affiche un message pour que l'application fonctionne uniquement 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, est la meilleure approche

InformationsquelleAutor daver
16

Vous ne pouvez pas forcer l'orientation dans la page web, mais vous pouvez les proposer ou de bloquer le contenu dans portarit mode.

J'ai fait un l'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>
```
Alors d'adapter votre css pour couvrir tous vos page
```
#block_land{position:absolute; top:0; left:0; text-align:center; background:white; width:100%; height:100%; display:none;}
```
Puis 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 le onload et onorientationchange, peut-être dans votre balise body
```
<body onorientationchange="testOrientation();" onload="testOrientation();">
```
Laissez-moi savoir si cette solution fonctionne pour vous.
- J'ai donc essayé une solution similaire et le problème que j'ai rencontré plusieurs personnes avaient leur orientation verrouillé. Donc, c'était vraiment gênant pour eux d'avoir à déverrouiller. Idéalement, la page ne s'affiche simplement dans le paysage (comme beaucoup d'applications de jeu de le faire). D'aller le chercher dans l'aide de CSS de rotation pour le résoudre.
InformationsquelleAutor Yoann

Je pense que la meilleure approche est le script, de sorte que lorsque l'utilisateur modifie, il modifie. J'ai modifié cette sorte qu'il tourne votre page principale DIV lorsqu'en mode portrait, forçant l'utilisateur à l'interrupteur. À moins de vouloir à incliner la tête de 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>

Ce serait rompre définitivement tout JS animation et le mobile de la réactivité de la page. Il causera plus de problème pour le développeur et il ne peut pas être considéré comme un correctif.
Il fait encore ce que l'OP veut. Et vraiment, ce que l'OP demande également pause le mobile de la réactivité, de sorte que vous ne pouvez pas reprocher à cette réponse pour le faire! Il n'a pas vraiment besoin de JavaScript cependant, le déclenchement de ce avec un orientation: portrait médias requête fonctionnera également.

InformationsquelleAutor Thomas Watson

0

J'ai essayé le code suivant forcer 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.
- excusez-moi monsieur, je pense que le code seulement de prévenir l'utilisateur de zoomer ou dézoomer. Testé sur Safari de l'iphone 4S et Chrome sous Android 4.3, à la fois en mode paysage et portrait sont encore possibles.
InformationsquelleAutor Wissam El-Kik

Simple moyen de forcer l'orientation paysage est fixé votre min.-max. largeur de 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; 
}}

l'espoir de résoudre votre problème.

InformationsquelleAutor Rizky Ariestiyansyah

Vous devez vous connecter pour publier un commentaire.