jQuery paysage mobile et classe portrait

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

Question

J'ai commencé à utiliser le cadre mobile jquery mais je ne peux pas sembler utiliser les classes de paysage et portrait aux styles minipulate.

Documentation dit

  

L'élément HTML aura toujours une classe de l'un « portrait » ou « paysage », selon l'orientation du navigateur ou le périphérique.

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

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

Si quelqu'un pouvait briller la lumière sur ce qu'il serait très apprécié.

Était-ce utile?

La solution

ok. J'ai décidé de voir ce qui se passe et boucle utilisée 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 la classe portrait ou paysage 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 ne change pas automatiquement la classe en rotation de sorte que le code suivant que je l'ai testé des œuvres. 

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

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

en utilisant un liitle de Script Tommi Laukkanen les travaux ci-dessus fine.

Autres conseils

Désolé, mais c'est à jour! Depuis HTML5 que vous avez dans CSS3 media queries. Maintenant, vous pouvez décider le style en CSS: 

@media screen and (orientation: landscape) {

 h1 {
  color: red;
 }

 #someId {
   width: 50%;
 }

}

@media screen and (orientation: portrait) {

 h1 {
  color: blue
 }

 #someId {
   width: 100%;
 }

}

Le portrait et paysage des classes sont ajoutés à l'élément html (non chaque élément de la page), de sorte que vous voulez que le sélecteur de css chercher le paysage / portrait en premier. Les travaux suivants: 

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

mettre cela dans un plug-in lil 

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

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

        }
    }

Voici une version entièrement fonctionnelle (basée sur Phil Jackson Code) testé sur différents appareils:)

Je suis sûr que jQuery Mobile utilisé pour gérer cela, mais j'ai une autre version de travail basée sur l'orientation de l'écran, mais 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');
    }
}

Ceci ajoute le portrait ou paysage classe, vous n'avez pas besoin de coder en dur que votre fichier modèle:)

Merci

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top