jQuery mobile Landschaft und Portrait Klasse

Ich habe begonnen, die jquery mobile Framework zu verwenden, aber ich kann nicht scheinen, die Querformat und Hochformat zu Minipulate Stile zu verwenden.jQuery mobile Landschaft und Portrait Klasse

Dokumentation sagt

Das HTML-Element immer eine Klasse von entweder „Portrait“ hat oder „Landschaft“, abhängig von der Ausrichtung des Browsers oder Geräts.

so bin ich unter dem Eindruck, dass <h1>foo</h1> entweder <h1 class="landscape">foo</h1> oder <h1 class="portrait">foo</h1>

noch h1.landscape { font-size:16px; } und h1.portrait { font-size:9px; } scheint nicht zu funktionieren würde.

Wenn jemand etwas Licht auf dieses Licht werfen könnte, wäre es sehr geschätzt.

Quelle

2010-11-23 Phil Jackson

ok. Ich entschied mich zu sehen, was los ist und curl verwendet, um den Quellcode über Android-Ansicht zu erhalten.

$ch = curl_init(); 
curl_setopt($ch, CURLOPT_URL, 'http://www.actwebdesigns.co.uk'); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Linux; U; Android 1.1; en-gb; dream) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2'); 
$html = curl_exec($ch); 

echo $html;

Das einzige Element, das die Querformat- oder Hochformatklasse hat, ist das HTML-Tag.

<html xmlns="http://www.w3.org/1999/xhtml" class="ui-mobile landscape min-width-320px min-width-480px min-width-768px min-width-1024px"><head><meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"></html>

Ich habe auch bemerkt, dass der Rahmen automatisch die Klasse bei der Rotation, so dass die folgenden Code schaltet nicht, die ich getestet habe funktioniert.

<script type="text/javascript"> 
$(window).resize(function(){ 
    $('html').toggleClass('landscape, portrait'); 
}); 
</script>

Verschrotten Sie die oben genannten, die Fehler hat.

<script type="text/javascript"> 
$(window).resize(function(){ 
    var height = $(window).height(); 
    var width = $(window).width(); 
    var ob = $('html'); 
    if(width > height) { 
     if(ob.hasClass('portrait')) { 
      ob.removeClass('portrait').addClass('landscape'); 
     } 
    }else{ 
     if(ob.hasClass('landscape')) { 
      ob.removeClass('landscape').addClass('portrait'); 
     } 
    } 
}); 
</script>

ein liitle von Tommi Laukkanen's Skript unter Verwendung der oben funktioniert.

Quelle

2010-11-23 07:05:07

jQuery Mobile diese automatisch für Sie erledigt. – dave1010

nein es nicht .. –

Früher (in Beta 3 glaube ich), aber nicht mehr. – dave1010

Die Hoch- und Querformatklassen werden zum html-Element hinzugefügt (nicht jedes Element auf der Seite). Sie möchten also, dass der css-Selektor zuerst nach dem Querformat/Portrait sucht. Die folgenden Werke:

html.landscape h1 { font-size:16px; } 
html.portrait h1 { font-size:9px; }

Quelle

2011-02-28 23:47:38 JohnTESlade

diese

in einem lil Plugin setzen

(function($){ 
    $.fn.portlandSwitch = function (options) { 
     // redefine styles to either landscape or portrait on phone switch 
     $(window).resize(function(){ 
      var height = $(window).height(); 
      var width = $(window).width(); 
      var ob = $('html'); 
      if(width > height) { 
       if(ob.hasClass('portrait')) { 
        ob.removeClass('portrait').addClass('landscape'); 
       } 
      }else{ 
       if(ob.hasClass('landscape')) { 
        ob.removeClass('landscape').addClass('portrait'); 
       } 
      } 
     }); 
    } 
})(jQuery); 



$.portlandSwitch();

Quelle

2011-07-29 11:48:20

Sorry, aber das ist nicht mehr aktuell! Seit HTML5 haben Sie in CSS3 MediaQueries.

@media screen and (orientation: landscape) { 

h1 { 
    color: red; 
} 

#someId { 
    width: 50%; 
} 

} 

@media screen and (orientation: portrait) { 

h1 { 
    color: blue 
} 

#someId { 
    width: 100%; 
} 

}

Quelle

2012-07-25 07:24:42 JonT

Mit dieser Funktion:

//Detect change rotation 
    function doOnOrientationChange() 
    { 
     switch(window.orientation) 
     { 
      case -90: 
      case 90: 
       alert('landscape'); 
       $('body').addClass('landscape'); 
       $('body').removeClass('portrait'); 
       break; 
      default: 
       alert('portrait'); 
       $('body').addClass('portrait'); 
       $('body').removeClass('landscape'); 
       break; 

     } 
    }

Quelle

2013-10-28 09:36:41

Hier ist eine voll funktionsfähige Version (basierend auf Phil Jackson-Code) auf verschiedenen Geräten getestet :)

Jetzt können Sie den Stil in CSS entscheiden

Ich bin sicher, dass jQuery Mobile damit umgegangen ist, aber ich habe eine andere Arbeitsversion, die auf der Bildschirmausrichtung basiert, aber ich denke, das wäre besser wegen der Einfachheit ...

if($(window).width() > $(window).height()){ 
    if($('body').hasClass('portrait')){ 
     $('body').removeClass('portrait').addClass('landscape'); 
    } else if(!$('body').hasClass('portrait')) { 
     $('body').addClass('landscape'); 
    } 
} 
else { 
    if($('body').hasClass('landscape')){ 
     $('body').removeClass('landscape').addClass('portrait'); 
    } else if(!$('body').hasClass('landscape')) { 
     $('body').addClass('portrait'); 
    } 
}

Das die Hoch- oder Querformat-Klasse fügt, brauchen Sie nicht zu hart Code die Datei auf Ihrer Vorlage :)

Dank

Quelle

2014-01-22 13:26:32

jQuery mobile Landschaft und Portrait Klasse

Antwort

Verwandte Themen