jQuery мобильный пейзаж и портретный класс

Я начал использовать платформу jquery для мобильных устройств, но я не могу использовать пейзажные и портретные классы для мини-стилей.jQuery мобильный пейзаж и портретный класс

документация говорит

HTML-элемент всегда будет иметь класс либо «портрет» или «пейзаж», в зависимости от ориентации браузера или устройства.

так что я нахожусь под впечатлением, что <h1>foo</h1> будет либо не похоже на работу <h1 class="landscape">foo</h1> или <h1 class="portrait">foo</h1>

еще h1.landscape { font-size:16px; } и h1.portrait { font-size:9px; }.

Если бы кто-нибудь мог пролить свет на это, он был бы очень признателен.

источник

2010-11-23 Phil Jackson

ok. Я решил посмотреть, что происходит, и использовал завиток, чтобы получить исходный код через вид 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;

Единственный элемент, который имеет пейзаж или портретный класс, является тегом 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>

Я также заметил, что рамки не автоматический переключателя класса на вращении, так следующий код, который я опробованный работу.

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

лома выше, что имеет недостатки.

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

с помощью liitle от Tommi Laukkanen's сценарий выше работает отлично.

источник

2010-11-23 07:05:07

JQuery Mobile делает это автоматически. – dave1010 2011-03-01 16:46:59

Классы портрета и ландшафта добавляются в элемент html (не каждый элемент на странице), поэтому вы хотите, чтобы селектор css сначала искал пейзаж/портрет. Следующие работы:

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

источник

2011-02-28 23:47:38 JohnTESlade

поместить это в лил плагин

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

источник

2011-07-29 11:48:20

Извините, но это устарело! С HTML5 у вас есть в CSS3 MediaQueries. Теперь вы можете решить, стиль в CSS:

@media screen and (orientation: landscape) { 

h1 { 
    color: red; 
} 

#someId { 
    width: 50%; 
} 

} 

@media screen and (orientation: portrait) { 

h1 { 
    color: blue 
} 

#someId { 
    width: 100%; 
} 

}

источник

2012-07-25 07:24:42 JonT

Используйте эту функцию:

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

     } 
    }

источник

2013-10-28 09:36:41

Здесь полностью рабочая версия (основанный на коде Phil Jackson) проверено на разных устройствах :)

Я уверен, что jQuery Mobile используется для обработки этого, однако у меня есть другая рабочая версия, основанная на ориентации экрана, однако я думаю, что это было бы лучше из-за простоты ...

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

Это добавляет портрет или пейзаж класс, вам не нужно жестко прописать, что ваш файл шаблона :)

Спасибо

источник

2014-01-22 13:26:32

jQuery мобильный пейзаж и портретный класс

ответ

Смежные вопросы