jQuery mobile Landschaft und Porträt-Klasse

StackOverflow https://stackoverflow.com/questions/4253391

Frage

Ich habe mit dem jQuery Mobile Framework begonnen und doch kann ich nicht scheinen, um die Landschaft und Porträt Klassen minipulate Stile zu verwenden.

Dokumentation sagt

  

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

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

noch h1.landscape { font-size:16px; } und h1.portrait { font-size:9px; } scheint nicht zu arbeiten.

Wenn jemand etwas Licht auf diesem glänzen könnte es sehr geschätzt werden würde.

War es hilfreich?

Lösung

ok. Ich entschied, was zu sehen, auf und gebrauchten curl geht den Quellcode via 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 Landschaft oder Portrait Klasse ist der 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 Auto nicht die Klasse bei einer Drehung um den folgenden Code-Schalter, die ich Werke getestet haben. 

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

Schrott die darüber hat Mängel. 

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

mit einem liitle von Skript die oben genannten Arbeiten fein Tommi Laukkanen.

Andere Tipps

Sorry, aber das ist mehr aktuell! Da HTML5 haben Sie in CSS3 MediaQueries. Jetzt können Sie den Stil in CSS entscheiden: 

@media screen and (orientation: landscape) {

 h1 {
  color: red;
 }

 #someId {
   width: 50%;
 }

}

@media screen and (orientation: portrait) {

 h1 {
  color: blue
 }

 #someId {
   width: 100%;
 }

}

Die Hoch- und Quer Klassen sind mit dem HTML-Elemente hinzugefügt (nicht jedes Element auf der Seite), so dass Sie den CSS-Selektor zuerst für die Landschaft / Porträt zu suchen. Die folgenden Werke: 

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

setzen diese in einer lil-Plugin 

(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();

Mit dieser Funktion kann: 

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

        }
    }

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

Ich bin sicher, jQuery Mobile verwendet, um dies zu handhaben, jedoch habe ich eine andere Arbeitsversion, die auf Bildschirmausrichtung basiert, aber ich denke, das besser es aufgrund wäre 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, der auf Ihre Template-Datei:)

Danke

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top