Мобильный пейзажный и портретный класс jQuery - PullRequest
Новая
       14

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

4 голосов
/ 23 ноября 2010

Я начал использовать мобильную среду 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; }, похоже, не работает.

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

Ответы [ 6 ]

5 голосов
/ 25 июля 2012

Извините, но это устарело! Начиная с 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%;
 }

}
5 голосов
/ 23 ноября 2010

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

3 голосов
/ 01 марта 2011

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

html.landscape h1 { font-size:16px; }
html.portrait h1 { font-size:9px; }
0 голосов
/ 22 января 2014

Вот полностью рабочая версия (на основе кода Фила Джексона), протестированная на разных устройствах:)

Я уверен, что 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');
    }
}

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

Спасибо

0 голосов
/ 28 октября 2013

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

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

        }
    }
0 голосов
/ 29 июля 2011

поместите это в плагин 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();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...