panorama móvil jQuery y clase retrato

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

Pregunta

He empezado a utilizar el marco móvil jQuery sin embargo, me parece que no puede utilizar las clases horizontal y vertical de estilos minipulate.

dice documentación

  

El elemento HTML siempre tendrá una clase de bien "retrato" o "paisaje", dependiendo de la orientación del navegador o dispositivo.

así que estoy bajo la impresión de que <h1>foo</h1> actuación sea <h1 class="landscape">foo</h1> o <h1 class="portrait">foo</h1>

¿No h1.landscape { font-size:16px; } y h1.portrait { font-size:9px; } no parece trabajo.

Si alguien pudiera brillar algo de luz sobre esto, sería muy apreciada.

¿Fue útil?

Solución

OK. Decidí ver que hay de nuevo y el rizo utilizado para obtener el código fuente a través de la vista androide. 

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

El único elemento que tiene la clase de paisaje o retrato es la etiqueta 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>

También he notado que el marco se conmuta no automática la clase en la rotación por lo que el siguiente código, que he probado obras. 

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

chatarra de lo anterior que tiene defectos. 

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

usando un liitle de guión de Tommi Laukkanen lo anterior funciona bien.

Otros consejos

Lo sentimos, pero que está fuera de fecha! Desde HTML5 que tiene en media query CSS3. Ahora se puede decidir el estilo en CSS: 

@media screen and (orientation: landscape) {

 h1 {
  color: red;
 }

 #someId {
   width: 50%;
 }

}

@media screen and (orientation: portrait) {

 h1 {
  color: blue
 }

 #someId {
   width: 100%;
 }

}

Las clases vertical y horizontal se añaden al elemento HTML (no cada elemento de la página), por lo que desea el selector CSS para buscar el paisaje / retrato en primer lugar. Las siguientes obras: 

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

poner esto en 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();

Utilice esta función: 

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

        }
    }

Aquí es una versión completamente de trabajo (basado en Phil código Jackson) probado en diferentes dispositivos:)

Estoy seguro de jQuery Mobile utiliza para manejar esto, sin embargo, me he otra versión de trabajo que se basa en la orientación de la pantalla, sin embargo creo que esto sería mejor debido a su simplicidad ... 

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

Esto agrega el retrato o paisaje de clase, que no es necesario para codificar que a su archivo de plantilla:)

Gracias

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top