jQuery paesaggio mobile e la classe ritratto

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

Domanda

Ho iniziato utilizzando il framework jQuery cellulare ma io non riesco a utilizzare le classi orizzontale e verticale agli stili minipulate.

documentazione dice

  

L'elemento HTML avrà sempre una classe di una "ritratto" o "paesaggio", a seconda dell'orientamento del browser o dispositivo.

quindi sono sotto l'impressione che sarebbe <h1>foo</h1> essere sia <h1 class="landscape">foo</h1> o <h1 class="portrait">foo</h1>

ancora h1.landscape { font-size:16px; } e h1.portrait { font-size:9px; } non sembra al lavoro.

Se qualcuno potesse risplendere luce su questo sarebbe molto apprezzato.

È stato utile?

Soluzione

OK. Ho deciso di vedere cosa sta succedendo e ricciolo utilizzato per ottenere il codice sorgente tramite vista Android. 

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

L'unico elemento che ha la classe orizzontale o verticale è il tag HTML. 

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

Inoltre ho notato che il quadro non auto accendere la classe a rotazione in modo che il codice seguente, che ho testato lavori. 

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

rottami quanto precede che ha difetti. 

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

con un pò da sceneggiatura di Tommi Laukkanen dei lavori sopra multa.

Altri suggerimenti

Ci dispiace ma che è fuori moda! Dal momento che HTML5 che avete in MediaQueries CSS3. Ora si può decidere lo stile in CSS: 

@media screen and (orientation: landscape) {

 h1 {
  color: red;
 }

 #someId {
   width: 50%;
 }

}

@media screen and (orientation: portrait) {

 h1 {
  color: blue
 }

 #someId {
   width: 100%;
 }

}

Le classi verticale e orizzontale vengono aggiunti all'elemento html (non ogni elemento della pagina), quindi si desidera che il selettore CSS per cercare il paesaggio / ritratto prima. Le seguenti opere: 

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

mettere questo in un lil plug-in 

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

Utilizzare questa funzione: 

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

        }
    }

Ecco una versione completamente funzionante (sulla base di Phil Jackson codice) testato su diversi dispositivi:)

Sono sicuro che jQuery Mobile utilizzato per gestire questa situazione, Comunque ho un'altra versione di lavoro che si basa su l'orientamento dello schermo, tuttavia credo che questo sarebbe meglio grazie alla sua semplicità ... 

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

Questo aggiunge il ritratto o paesaggio di classe, non è necessario a hard-code che al file di modello:)

Grazie

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top