Дифференциация между портретным режимом на карманных устройствах и настольных компьютерах

Ответ 1

Я думаю, что лучший способ - согласно MDN (Mozilla Developer Network), используя window.innerHeight документацию здесь и window.innerWidth документация здесь, где он измеряет ширину и высоту браузера в пикселях для определения ориентации.

//Detect mobile platform

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

if ( isMobile.any() ) {

    if (window.innerHeight > window.innerWidth) {
       console.log("Orientation is in portrait");
       }
    else {
       console.log("Orientation is in landscape");
         }
    }
else {
   console.log("Mobile platform not detected.");
};

Дополнительная документация для mobile.

Ответ 2

Ну, эти три правила охватывают большинство мобильных устройств.

только экран @media и (min-width: 768px) и (max-width: 959px) @media и (min-width: 480px) и (max-width: 767px) @media только экран и (максимальная ширина: 479 пикселей)

В качестве альтернативы попробуйте использовать адаптивную структуру Skeleton

Ответ 3

Вы должны посмотреть Modernizr. Он включает в себя функции обнаружения/вывода для практически всех полезных современных функций браузера, в частности, включает ли устройство сенсорный интерфейс с помощью простой булевой проверки на Modernizr.touch. Оттуда вы сможете уйти с тестированием портрета/пейзажа, сравнивая document.width с документом .height, что-то вроде:

if(Modernizr.touch) {
    // is touch device

    if(document.height > document.width) {
        // is in portrait
    } else {
        // is in landscape
    }
} else {
    // not touch device
}

Обратите внимание, что, как вы обнаружили, нет совершенного теста для touch/desktop, поэтому, если вы включите тест Touch Modernizr (или покажете свой собственный), было бы неплохо проконсультироваться с этим которая объясняет, какие сенсорные тесты являются надежными, когда.

Ответ 4

Для полноты это объясняет, как использовать селекторы CSS, чтобы квалифицировать использование медиа-запросов в контексте вложенного LESS.

@enginefree answer и следующие комментарии, объяснили, как проверить мобильное устройство, его ориентацию и управлять атрибутами элементов на основе результата.

Следующий код иллюстрирует использование селекторов LESS & и CSS3 :not для отображения наших медиа-запросов, когда атрибут или класс, который мы ищем, не обнаружен:

body {
    /* this has the possible class or data attribute of 'mobile' */
    /* this is not included in the nest as you can't climb at will */
    /* the class or attribute (via our JavaScript) could be applied
       to any element that sits above and outside of `#level-1` in 
       this example */

}


#level-1 { 

    #level-2 {

        #level-3 {

            #level-4 {

                body:not(.mobile) & {

                    /* produces the following CSS */
                    /* body:not(.mobile) #level-1 #level-2 #level-3 #level-4 { } */
                    /* rules in this block will only be executed if body does not have a mobile class */

                    @media screen and (max-width:) {

                    }
                }

                body:not([data-device=mobile]) & {

                    /* produces the following CSS */
                    /* body:not([data-device="mobile"]) #level-1 #level-2 #level-3 #level-4 { } */
                    /* rules in this block will only be executed if body does not have a mobile data-device attribute */

                    @media screen and (max-width:) {

                    }
                }

            }

        }

    }

}

Если элемент body был частью этого гнезда, вы получите следующий CSS, и это должно объяснить, почему элемент должен существовать вне области гнезда, а также над ним:

body:not(.mobile) body #level-1 #level-2 #level-3 #level-4 { }

Подробнее об операторе &

Ответ 5

Большая библиотека javascript css3-mediaqueries-js.