jQuery mobile paysage et portrait de la classe

J'ai commencé à utiliser le framework jquery mobile mais je n'arrive pas à utiliser le paysage et le portrait des classes de minipulate les styles.

documentation dit

L'élément HTML aura toujours une classe de "portrait" ou "paysage", en fonction de l'orientation de l'appareil ou navigateur.

donc je suis sous l'impression que <h1>foo</h1> serait <h1 class="landscape">foo</h1> ou <h1 class="portrait">foo</h1>

encore h1.landscape { font-size:16px; } et h1.portrait { font-size:9px; } ne semble pas fonctionner.

Si quelqu'un pouvait briller un peu de lumière sur ce qu'il serait bien apprécié.

OriginalL'auteur Phil Jackson | 2010-11-23

  1. 5

    ok. J'ai décidé de voir ce qui se passe et utilisé curl pour obtenir le code source via android vue.

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

    Le seul élément qui a le paysage ou le portrait de la classe est la balise 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>

    J'ai aussi remarqué que le cadre n'est pas auto commutateur de la classe sur la rotation de sorte que le code suivant que j'ai testé fonctionne.

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

    ferraille ci-dessus qui a des défauts.

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

    à l'aide d'un liitle de Tommi Laukkanen de l' script ci-dessus fonctionne très bien.

    jQuery Mobile est fait pour vous automatiquement.
    non, il n'est pas..
    Il a utilisé (en version bêta 3 je crois) mais ne le fait plus.
    Je serais à l'aide de la "orientationchange" de l'événement, plutôt que de les redimensionner..
    n'oubliez pas d'ajouter une classe standard "portrait" ou "paysage" dans votre code html manuellement OU modifier le script qui ajoute une classe, même si elle n'a pas déjà ET init de cette fonction sur le document de prêt d'autre, ça ne marchera pas!

    OriginalL'auteur Phil Jackson

  2. 5

    Désolé mais ce n'est pas à jour!
    Depuis HTML5 vous avez en CSS3 MediaQueries.
    Maintenant vous pouvez choisir le style dans le CSS:

    @media screen and (orientation: landscape) {

 h1 {
  color: red;
 }

 #someId {
   width: 50%;
 }

}

@media screen and (orientation: portrait) {

 h1 {
  color: blue
 }

 #someId {
   width: 100%;
 }

}

    OriginalL'auteur JonT

  3. 3

    Le portrait et paysage classes sont ajoutées à l'élément html (et non à chaque élément de la page), si vous voulez le sélecteur css pour l'apparence du paysage/portrait en premier. Les ouvrages suivants:

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

    OriginalL'auteur JohnTESlade

  4. 0

    mettre cela dans un ptit 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();

    OriginalL'auteur Phil Jackson

  5. 0

    Utiliser cette fonction:

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

        }
    }

    OriginalL'auteur Xman Classical

  6. 0

    Ici est la version complète (basé sur Phil Jackson code) testé sur différents appareils 🙂

    Je suis sûr que jQuery Mobile utilisé pour gérer ceci, cependant j'ai une autre version de travail qui est basé sur l'orientation de l'écran, cependant, je pense que ce serait mieux en raison de sa simplicité...

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

    Cela ajoute de la mode portrait ou paysage-classe, vous n'avez pas besoin de coder en dur vers votre fichier de modèle 🙂

    Grâce

    OriginalL'auteur ZAD