Как настроить определение экрана?

Question

Как настроить определение экрана?

1

Добрый день!

Найден скрипт в сети, чтобы определить размер экрана, но я не могу понять, как правильно установить определение isMobile, isTablet, isDesktop.

function() {
    var i = {
        mobile: "mobile",
        tablet: "tablet",
        desktop: "desktop",
        oldHeight: null,
        oldWidth: null,
        current: function() {
            return this.define()
        },
        isMobile: function() {
            return this.define() === this.mobile
        },
        isTablet: function() {
            return this.define() === this.tablet
        },
        isDesktop: function() {
            return this.define() === this.desktop
        },
        define: function() {
            return this.width() < 768 ? this.mobile : this.width() < 1360 ? this.tablet : this.desktop
        },
        height: function() {
            return window.innerHeight
        },
        width: function() {
            return window.innerWidth
        },
        init: function() {
            this.oldHeight = window.innerHeight, this.oldWidth = this.define()
        }
    };

Скажи мне, пожалуйста...

Теперь я использую этот метод:

if(
    (screen.width <= 640) || 
    (window.matchMedia && 
     window.matchMedia('only screen and (max-width: 640px)').matches
    )
  ){
   // Do the mobile thing
}

Но я думаю, что вышеупомянутый сценарий более универсален.

PS Можете есть более правильные способы определения размеров экрана?

Спасибо

paveell 11 май 2018, в 09:48

Источник

Теги:

javascript

function

matchmedia

screen

1 ответ

Ещё вопросы

danwellman · Answer 1 · 2018-05-11T05-08-00.000Z

Как вы называете метод isMobile? Кажется, что это нормально, если вы удалите внешнюю анонимную function и вызовите методы, такие как i.isMobile() - для меня это сообщает false когда у меня есть браузер, и это правда, если я уменьшу браузер до менее чем 768 пикселей.,

Я понял, спасибо. Вот так это работает: if (i.isMobile ()) {pageMain.classList.add ("main - hide"); }
Если вам помог этот ответ, рассмотрите возможность выбора его в качестве принятого или повышения.