site mobile - réinitialisation de la fenêtre d'affichage sur changement d'orientation

Cela sonne exactement comme le problème que j'ai. Je ne pouvais pas trouver un consolidés réponse donc a la pièce d'un ensemble.

Tout d'abord, tout le CSS qui est apparu différents sur le portrait et horizontale devait être mis dans une de @media tag. Il est important de droite l'ensemble de la classe dans chaque @sélecteur de médias, et pas seulement les bits qui sont différents. CSS, qui est commun à ces deux points de vue peuvent arrivés au sommet. Mon appareil largeur était de montrer au 580, j'ai donc fixé le seuil de coupure à 600 - vous pouvez mettre ce que vous pensez est juste pour vous.

    //All CSS that is common to both

@media all and (min-device-width:601px)and (orientation:landscape){
    //All CSS for Landscape and Desktop
}
@media only screen and (max-device-width:600px)and (orientation:portrait){
    //All CSS for Portrait view
}

Suivante était de la fenêtre d'affichage des paramètres. J'ai mis ce code en standard dans chacun de mes page têtes (la taille de mon Téléphone Mobile est le Portrait de la taille). Il a besoin de la méta-il donc que le javascript peut obtenir plus tard.

<meta name="viewport" id="viewport" content="width=480, initial-scale=0.25, maximum-scale=1.0;" />

Enfin, j'ai eu à utiliser du Javascript pour ré-écrire la fenêtre d'affichage des paramètres lorsque la page a détecté une rotation du téléphone (grâce à Vinayak.B Article Original)

    //Code to display on mobiles
    //========================================

    var swidth = window.screen.width;
    //These were the values of my website CSS container for portrait and landscape
    var vpwidth = 480;
    var vlwidth = 960;

    updateOrientation();

    window.addEventListener('orientationchange', updateOrientation, false);

    function updateOrientation() {


      var viewport = document.querySelector("meta[name=viewport]");

      switch (window.orientation) {
        case 0: //portrait
          //set the viewport attributes to whatever you want!
            viewport.setAttribute('content', 'width=' + vpwidth + ', initial-scale=0.25, maximum-scale=1.0;')
          break;
        case 90: case -90: //landscape
          //set the viewport attributes to whatever you want!
            viewport.setAttribute('content', 'width=' + vlwidth + ', initial-scale=0.25, maximum-scale=1.0;')
          break;
        default:
          //set the viewport attributes to whatever you want!
            viewport.setAttribute('content', 'width=' + vpwidth + ', initial-scale=0.25, maximum-scale=1.0;')
          break;
      }
        //alert(swidth + ' lead to an initial width of ' + vpwidth + ' and a rotate width of ' + vlwidth);
    }

Après des HEURES à essayer des choses, c'est ce qui a fonctionné pour moi. Pour une raison que sur mon téléphone, initial-scale=1 vissé, mais 0.25 travaillé?! J'espère que cela fonctionne pour vous ou, au moins, offre un bon point de départ.

OriginalL'auteur Pete.K

Eu le même problème, c'était ma solution.

Recharger la page après un changement d'orientation, puis régler la fenêtre d'affichage des variables basées sur une nouvelle orientation.

window.onorientationchange = function() {
/*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
left, or landscape mode with the screen turned to the right. */
var orientation = window.orientation;
switch(orientation) {
case 0:
var current = $('body').attr('class');
if(current != 'ps-active'){
location.reload();
}
break; 
case 90:
var current = $('body').attr('class');
if(current != 'ps-active'){
location.reload();
}
break;
case -90: 
var current = $('body').attr('class');
if(current != 'ps-active'){
location.reload();
}
break;
}
}
$(document).ready(function() {
window.onload = function() {
/*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
left, or landscape mode with the screen turned to the right. */
var orientation = window.orientation;
switch(orientation) {
case 0:
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width; initial-scale=0.2; maximum-scale=1.0; user-scalable=yes;');
$('.container').show();
break; 
case 90:
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width; initial-scale=0.4; maximum-scale=1.0; user-scalable=yes;');
$('.container').show();
break;
case -90: 
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width; initial-scale=0.4; maximum-scale=1.0; user-scalable=yes;');
$('.container').show();
break;
default:
$('.container').show();
break;
}
}

OriginalL'auteur hoppipolla

la matchMedia fonction fonctionne très bien sur Android dans mes tests:

var mql = window.matchMedia("(orientation: landscape)");
if (mql.matches) {
/* The device is currently in landscape orientation */
}
else {
/* The device is currently in portrait orientation */
}

OriginalL'auteur Ryan Price

Je suis assez certain que vous ne pouvez ramassage le changement d'orientation dans la Galaxie à l'aide de JS.
Essayez l'extrait de code ci-dessous.

---

À partir d'un related post: Changement d'Orientation dans Android à l'aide de javascript

function orientation_changed ()
{
if ( is_portrait() )
{
//do something
}
else if ( is_landscape() )
{
//do something else
}
clearTimeout(window.t);
delete window.t;
}
window.t = undefined;
window.onorientationchange = function (event)
{
window.t = setTimeout('orientation_changed();', 250);
}
function is_landscape()
{
var uagent = navigator.userAgent.toLowerCase();
if ( uagent.search('ipad') > -1 )
{
var r = ( window.orientation == 90 || window.orientation == -90 );
}
else
{
var r = ( screen.width > screen.height );
}
return r;
}

OriginalL'auteur The John Smith