How do I customize the screen definition?

Question

Good day!

Found a script on the network to determine the screen size, but I can not figure out how to correctly set the definition 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()
        }
    };

Tell me please...

Now I use this method:

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

But I think that the above script is more universal.

P.S. Can eat more correct ways of definition of the sizes of the screen?

Thank you

score 0 · Answer 1 · answered May 11 '18 at 07:57

0

How are you calling the isMobile method? It seems to work fine if you remove the outer anonymous function and call the methods like i.isMobile() - for me that reports false when I have the browser maximized, and true if I shrink the browser down to less than 768px wide...

answered May 11 '18 at 07:57

danwellman

9,068
8
60
88

I got it, thank you. Here so it works: if (i.isMobile()) { pageMain.classList.add("main--hide"); } – paveell May 12 '18 at 10:59
If this answer helped you, please consider choosing it as the accepted answer, or giving it an upvote – danwellman May 15 '18 at 07:35

How do I customize the screen definition?

1 Answers1