mobile Website - zurücksetzen des Viewports auf die Ausrichtung ändern

Dieser klingt genau wie das problem, das ich hatte. Ich konnte Sie nicht finden, eine konsolidierte Antwort so musste ein Stück zusammen.

Zunächst alle CSS -, die sah anders auf das Porträt und die horizontale gebracht werden musste, in einen eigenen @media tag. Es ist wichtig, nach rechts hin die ganze Klasse in jeder @media-Auswahl, nicht nur die bits, die Verschieden sind. CSS, das in beiden Ansichten können an der Spitze. Mein Gerät Breite zeigte bei 580 also ich habe die cut-off bei 600 - Sie können es zu dem, was Sie fühlen, ist die richtige für Sie.

    //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
}

Nächste war die viewport-Einstellungen. Ich habe diesen code als standard in jedes meiner Seite Köpfe (die Größe ist mein Handy-Hochformat-Größe). Es braucht die meta es so, dass das javascript kann man es später.

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

Schließlich musste ich einige Javascript neu zu schreiben, die viewport-Einstellungen, wenn die Seite erkannt, dass eine Drehung des Telefons (Dank Vinayak.B Original-Artikel)

    //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);
    }

Nach STUNDEN des ausprobieren, das ist was für mich gearbeitet. Aus irgendeinem Grund auf meinem Handy, das initial-scale=1 eingeschraubt, aber 0.25 arbeitete?! Ich hoffe, es funktioniert für Sie, oder zumindest bietet Sie einen guten Ausgangspunkt.

Hatte das gleiche Problem, das war meine Lösung.

Reload der Seite nach der Ausrichtung zu ändern, dann setzen viewport-Variablen basierend auf der neuen Ausrichtung.

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;
  }
}

den matchMedia-Funktion funktioniert sehr gut auf Android in meinen 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 */
}

Ich bin mir ziemlich sicher, Sie können nur Abholung die änderung der Ausrichtung in der Galaxie mit JS.
Versuchen das snippet unten.

Vom related post: Orientierung ändern in Android mit 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;
}