What is the best way to capture screen resizing in real time?

Question

There is a better way to get real-time resizing of the screen?

I need to know if it’s mobile or desktop, as I resize the screen, because the way it is is not 100% effective... (I’ve tried with document.documentElement.clientWidth and document.body.clientWidth), but sometimes it stops working.

The media queries de CSS works well to hide elements and adjust, but it does not help me to disable methods.

I need to get a variable in the Angularjs controller in order to disable some methods in the mobile version, like this example that makes the mobile menu stop working because it conflicts with the mobile menu version: click-outside="outSideMenuExplorer()" the idea is to make it not exist in the mobile version, example:

click-outside="(!is_mobile) ? outSideMenuExplorer() : null"

$scope.is_mobile = false;

var size_mob = Boolean(window.innerWidth < 768 && window.innerWidth < window.innerHeight);  

window.onresize = function() {
  $scope.is_mobile = size_mob;
}

Answer 1

There is a better way to get real-time resizing of the screen?

The event window.onresize is the only real-time method to capture the setting after resizing the window.

I need to know if it’s mobile or desktop, as long as I resize the screen, because the way it is is not 100% effective...

There is no 100% efficient API or library to determine if it is a mobile/desktop access.

Using both back-end and front-end, most methods and libraries use the string provided by "user-agent" to "try" to filter. This string can be easily forged by bots or plugins to look different than it is (are).

Maybe a logic to test features will help you find a little more consistency.

• try to create a TouchEvent
• check the property ontouchstart
• check the mediaQueryList

TouchEvent will be created on any device that supports "touch" including "touch-screen" monitors... if it does not support a DOM Exception will be released.

Other consultations (ontouchstart and mediaQueryList) should also throw some kind of error in case of failure. All this in a block try/catch should be sufficient ... in case of an error or exception, you can try to consult the string provided by "user-agent".

It is noteworthy that both navigator.userAgent for the header "user-agent:" will soon be passed over in favour of the new specification Clients Hint proposed by Google and supported by key suppliers (see: https://www.chromestatus.com/feature/5704553745874944)

var container = document.getElementById('box');

/**
 * Is mobile?
 * @see original referrer {@link http://mobiledetect.com} (site down)
 * @return { Boolean }
 */
function isMobile() {
    var dc = document,
        wd = window;
    // get browser "User-Agent" or vendor ... see "opera" property in `window`
    var wua = (wd.navigator.userAgent || wd.navigator.vendor || wd.opera || '');
    try {
        /**
         * Creating a touch event ... in modern browsers with touch screens or emulators (but not mobile) does not cause errors.
         * Otherwise, it will create a `DOMException` instance
         */
        dc.createEvent("TouchEvent");

        // check touchStart event
        (('ontouchstart' in wd) || ('ontouchstart' in dc.documentElement) || wd.DocumentTouch && wd.document instanceof DocumentTouch || wd.navigator.maxTouchPoints || wd.navigator.msMaxTouchPoints) ? void(0) : new Error('failed check "ontouchstart" event');

        // check `mediaQueryList` ... pass as modern browsers
        var mQ = wd.matchMedia && matchMedia("(pointer: coarse)");
        // if no have, throw error to use "User-Agent" sniffing test
        if ( !mQ || mQ.media !== "(pointer: coarse)" || !mQ.matches ) {
            throw new Error('failed test `mediaQueryList`');
        }

        // if there are no failures the possibility of the device being mobile is great (but not guaranteed)
        return true;
    } catch(ex) {
        // fall back to User-Agent sniffing
        return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(wua) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(wua.substr(0,4));
    }
};

window.onresize = function() {
    container.innerHTML = isMobile() ? 'Mobile' : 'Desktop';
};

<div id="box"></div>

The credits of Regexp used here go to the old site http://mobiledetect.com that is no longer online but, still serves well to understand its functioning.

---

Different frameworks of CSS use media queries to determine their "break-points" ... use them to show or hide or fetch measurements on the object window may not be the best way because many basic/intermediate devices and top of the line (smartphones/tablets) offer a high resolution.

Answer 2

I think I might be able to solve this using CSS only:

   .state-indicator {
     display: none;
   }

@media all and (max-width: 1200px) {
    [data-type="small-desktop"]{display: block}
}

/* tablet */
@media all and (max-width: 1024px) {
    [data-type="tablet"]{display: block}
}

/* mobile phone */
@media all and (max-width: 768px) {
    [data-type="mobile"]{display: block }
}

Javascript:

Response in HTML:

<div data-type="desktop" click-outside="outSideMenuExplorerDesktop()" class="state-indicator"></div>
<div data-type="mobile" click-outside="outSideMenuExplorerMobile()" class="state-indicator"></div>
<div data-type="tablet" click-outside="outSideMenuExplorerTablet()" class="state-indicator"></div>
<div data-type="small-desktop" click-outside="outSideMenuExplorerSmallDesktop()" class="state-indicator"></div>

It helped me come up with a formula:

Source of reference