Screen resolution info

Show what resolution your application is optimized (and thought) for

Usage

When to use

In case an application does not work on certain screen widths (e.g. not on small mobile devices) for any reason, the user should be informed in case he/she is using such a device or screen resolution to avoid confusion.

Some applications might not be tested or testable on every device, some applications might not work at all because of their complexity and/or usecase. In such a case the user should be informed - he/she can still use the app but should be informed about possible UI glitches or malfunction.

Behavior

The information notice shall appear whenever the app is resized (or loaded) on a not optimized resolution. This notice has to be actively dismissed, after that the application can be used as usual but with the awareness of possible UI glitches.

Ideally the notice dismissal will be persisted for some time, in the simplest case it will be reshown upon next start/load of your application.

The notice features the same known styling of the confirm (dialog), the difference is that there is only one primary action to dismiss it.

Screen resolution info on mobile device, e.g. smartphone

Screen resolution info on mobile device, e.g. smartphone

Screen resolution info on desktop device

Screen resolution info on desktop device

Screen resolution info example for screen widths of >= 1024px

<div class="appWrapper">

    <div class="dialog is-shown dialog--confirm confirm--info" id="reponsiveInfoNotice">
        <div class="dialog__container">
            <div class="dialog__background">
                <section class="dialog__content">
                    <h1 class="confirm__headline">Screen resolution info</h1>
                    <p>
                        This application is not optimized for your current screen resolution (which seems to be lower then <= 1024 pixels).
                    </p>
                    <p>
                        Please use a device with higher screen resolution or increase your window size for optimal use. The UI might break for non-optimal resolutions.
                    </p>
                </section>
                <footer class="dialog__footer">
                    <a class="button button--primary" href="#">Acknowledge & Dismiss</a>
                </footer>
            </div>
        </div>
    </div>

    <style>
        @media (min-width: 1025px) { #reponsiveInfoNotice { display: none; } }
    </style>
    <div class="appWrapper__regions has-appHeader has-contextRegion has-leadingRegion contextRegion-is-expanded leadingRegion-is-expanded appWrapper__regions--pushLayout">

        <section class="appHeader">
            <div class="appHeader__breadcrumb">
            </div>
            <div class="appHeader__content">
            </div>
        </section>

        <section class="leadingRegion">
        </section>

        <section class="mainRegion">
            <h1>Screen resolution info demo</h1>
            <p>
                If you cannot see any confirm dialog, please resize your browser window to be equal or less than 1024px wide.
            </p>
        </section>

        <section class="contextRegion">
        </section>

    </div>

</div>
<script type="text/javascript" src="https://static.eu1.mindsphere.io/osbar/v4/js/main.min.js"></script>
<script>
    _msb.init({
        title: "Responsive Info Notice",
        showLegal: true,
        polyfills: {
            promise: true
        }
    });
    window.onload = function(e){
        var dialog = document.querySelectorAll("#reponsiveInfoNotice");
        if (dialog) {
            document.querySelectorAll("#reponsiveInfoNotice a.button")[0].addEventListener('click', function() {
                dialog[0].classList.remove('is-shown');
            });
        }
    }
</script>

Addition Explanation:

The following adaptions have to be done depending on use case and application:

  1. Adjust the CSS media query according to your supported device widths / break points; all valid css units are possible:
    • The example below hides the notice on all devices that have a smaller screen or window width then 1025 pixels.
      @media (min-width: 1025px) { #reponsiveInfoNotice { display: none; }}
    • The example below hides the notice on all devices that have a smaller screen or window width then 1025 pixels AND screens bigger then 1920 pixels.
      @media (min-width: 1025px) and (max-width: 1920px) { #reponsiveInfoNotice { display: none; }}
  2. If needed, adjust the identifier for the notice in markup and css.
  3. Adjust the display/screen properties in your notification, such that the resolution described is correct.
  4. Make the notification ‘dismissable’ (either just remove the ‘is-shown’ class on click, persist the action for some time etc).
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top